CartItem.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <template lang="pug">
  2. li.cart-item
  3. h3.item-name {{ item.display_name }}
  4. input.item-quantity(type="text" :value="item.qty")
  5. span.item-x x
  6. span.item-price {{ getPrice() }}
  7. span.item-equals =
  8. span.item-subtotal {{ getSubtotal() }}
  9. </template>
  10. <script>
  11. export default {
  12. props: {
  13. item: {
  14. type: Object,
  15. required: true,
  16. default: () => {
  17. return {}
  18. }
  19. }
  20. },
  21. methods: {
  22. getPrice() {
  23. return accounting.formatMoney(this.item.list_price, '₲', 0, '.', ',')
  24. },
  25. getSubtotal() {
  26. return accounting.formatMoney(this.item.list_price * this.item.qty, '₲', 0, '.', ',')
  27. }
  28. },
  29. mounted() {
  30. this.$set(this.item, 'qty', 1)
  31. }
  32. }
  33. </script>
  34. <style lang="sass">
  35. .cart-item
  36. width: 100%
  37. height: 84px
  38. list-style: none outside none
  39. border-bottom: 1px solid #d3d3d3
  40. box-sizing: border-box
  41. &:hover
  42. background: #f5f5f5
  43. transition-duration: 1s
  44. cursor: pointer
  45. .item-name
  46. width: 100%
  47. height: 20px
  48. margin: 5px
  49. float: left
  50. font:
  51. size: 8pt
  52. .item-quantity
  53. width: 50px
  54. height: 30px
  55. margin-top: 6px
  56. text-align: right
  57. float: left
  58. .item-x
  59. width: 20px
  60. height: 20px
  61. margin-top: 12px
  62. text-align: center
  63. float: left
  64. .item-price
  65. width: 80px
  66. height: 20px
  67. margin-top: 12px
  68. text-align: right
  69. float: left
  70. .item-equals
  71. width: 20px
  72. height: 20px
  73. margin-top: 12px
  74. text-align: center
  75. float: left
  76. .item-subtotal
  77. width: 100px
  78. height: 20px
  79. margin-top: 12px
  80. padding-right: 15px
  81. text-align: right
  82. float: right
  83. font-weight: bold
  84. </style>