CartItem.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template lang="pug">
  2. .cart-item
  3. h3.item-name {{ item.name }}
  4. input.item-quantity(type="text" :value="item.qty")
  5. span.item-x x
  6. span.item-price Gs {{ item.list_price }}
  7. span.item-equals =
  8. span.item-subtotal Gs {{ item.list_price * item.qty }}
  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. mounted() {
  22. this.$set(this.item, 'qty', 1)
  23. }
  24. }
  25. </script>
  26. <style lang="sass">
  27. .cart-item
  28. width: 98%
  29. height: 85px
  30. border-bottom: 1px solid #d3d3d3
  31. .item-name
  32. width: 100%
  33. height: 15px
  34. margin: 5px
  35. float: left
  36. font:
  37. size: 11pt
  38. .item-quantity
  39. width: 50px
  40. height: 30px
  41. margin-top: 6px
  42. text-align: right
  43. float: left
  44. .item-x
  45. width: 20px
  46. height: 20px
  47. margin-top: 12px
  48. text-align: center
  49. float: left
  50. .item-price
  51. width: 80px
  52. height: 20px
  53. margin-top: 12px
  54. text-align: right
  55. float: left
  56. .item-equals
  57. width: 20px
  58. height: 20px
  59. margin-top: 12px
  60. text-align: center
  61. float: left
  62. .item-subtotal
  63. width: 100px
  64. height: 20px
  65. margin-top: 12px
  66. padding-right: 15px
  67. text-align: right
  68. float: right
  69. font-weight: bold
  70. </style>