CartItem.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template lang="pug">
  2. li.cart-item
  3. h3.item-name {{ item.displayName }}
  4. input.item-quantity(:value='quantity' v-model='quantity' number)
  5. span.item-x x
  6. span.item-price {{ item.price }}
  7. span.item-equals =
  8. span.item-subtotal {{ item.price * item.qty }}
  9. .cart-item-options-wrapper
  10. .cart-item-options
  11. .cart-item-option(class='fa fa-plus' @click='addToCart(item)')
  12. .cart-item-option(class='fa fa-minus' @click='decrementFromCart(item)')
  13. .cart-item-option(class='fa fa-trash' @click='removeFromCart(item)')
  14. </template>
  15. <script>
  16. import { mapGetters, mapActions } from 'vuex'
  17. export default {
  18. props: {
  19. item: {
  20. type: Object,
  21. required: true,
  22. default: {}
  23. }
  24. },
  25. computed: {
  26. quantity: {
  27. get() {
  28. return this.item.qty || 1
  29. },
  30. set(value) {
  31. this.item.qty = value || 1
  32. }
  33. }
  34. },
  35. methods: {
  36. ...mapActions([
  37. 'addToCart',
  38. 'decrementFromCart',
  39. 'removeFromCart'
  40. ])
  41. },
  42. mounted() {
  43. this.$set(this.item, 'qty', 1)
  44. this.$set(this.item, 'price', this.item.standardPrice)
  45. }
  46. }
  47. </script>
  48. <style lang="sass">
  49. .cart-item
  50. width: 100%
  51. height: 85px
  52. list-style: none outside none
  53. border-bottom: 1px solid #d3d3d3
  54. box-sizing: border-box
  55. position: relative
  56. &:nth-child(1)
  57. border-top: 1px solid #d3d3d3
  58. &:hover
  59. transition-duration: 1000ms
  60. border-bottom: 2px solid #7c7bad
  61. .item-name
  62. width: 100%
  63. height: 20px
  64. margin: 10px 0 5px 0
  65. float: left
  66. font-size: 8pt
  67. .item-quantity
  68. width: 50px
  69. height: 28px
  70. margin-top: 6px
  71. text-align: right
  72. float: left
  73. .item-x
  74. width: 20px
  75. height: 20px
  76. margin-top: 12px
  77. text-align: right
  78. float: left
  79. .item-price
  80. width: 80px
  81. height: 20px
  82. margin-top: 12px
  83. text-align: right
  84. float: left
  85. .item-equals
  86. width: 20px
  87. height: 20px
  88. margin-top: 12px
  89. text-align: center
  90. float: left
  91. .item-subtotal
  92. width: 100px
  93. height: 20px
  94. margin-top: 12px
  95. padding-right: 15px
  96. text-align: right
  97. font-weight: bold
  98. .cart-item-options-wrapper
  99. width: 100%
  100. height: 20px
  101. position: absolute
  102. bottom: 0
  103. display: flex
  104. justify-content: center
  105. .cart-item-options
  106. width: 90px
  107. height: 20px
  108. border: 1px solid #d3d3d3
  109. border-bottom: none
  110. display: flex
  111. justify-content: center
  112. .cart-item-option
  113. width: 18px
  114. height: 18px
  115. margin: 0 5px
  116. color: #666
  117. &:hover
  118. cursor: pointer
  119. &.fa
  120. padding-left: 2px
  121. line-height: 20px
  122. &.fa-plus:hover
  123. color: #2196f3
  124. &.fa-minus:hover
  125. color: #ffc107
  126. &.fa-trash:hover
  127. color: #f44336
  128. </style>