Cart.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template lang="pug">
  2. .cart(:style='{ width: defaultOptions.layout.width, height: defaultOptions.layout.height }')
  3. .cart-total
  4. h2.currency-cart-total {{ total | currency(...defaultOptions.currency) }}
  5. .cart-items-wrapper
  6. transition-group(name='list' tag='ul' class='cart-items')
  7. cart-item(v-for='(item, index) in items' :key='index' :index='index' :item='item' @onChange='onItemChanged' @onClickIncrement='onIncrementQty' @onClickDecrement='onDecrementQty' @onClickMoney='onChangePrice' @onClickDelete='onDeleteItem' :options='defaultOptions.currency')
  8. </template>
  9. <script>
  10. import CartItem from './CartItem'
  11. export default {
  12. components: {
  13. CartItem
  14. },
  15. props: {
  16. items: {
  17. type: Array,
  18. default: [],
  19. required: true
  20. },
  21. options: {
  22. type: Object || String,
  23. default: null
  24. }
  25. },
  26. methods: {
  27. computeOptions(value) {
  28. if (!value) {
  29. return
  30. }
  31. for(let key in value) {
  32. if(!this.defaultOptions.currency[key]) {
  33. continue
  34. }
  35. this.defaultOptions.currency[key] = value[key]
  36. }
  37. },
  38. computeTotal() {
  39. let sum = 0
  40. for (let item of this.items) {
  41. sum = sum + ((item.price || 1) * (item.quantity || 1))
  42. }
  43. this.total = sum
  44. this.$emit('onTotalComputed', this.total)
  45. },
  46. onItemChanged(item) {
  47. this.computeTotal();
  48. },
  49. onIncrementQty(item) {
  50. this.$emit('onIncrementQty', item)
  51. },
  52. onDecrementQty(item) {
  53. this.$emit('onDecrementQty', item)
  54. },
  55. onChangePrice(item) {
  56. this.$emit('onChangePrice', item)
  57. },
  58. onDeleteItem(item) {
  59. this.$emit('onDeleteItem', item)
  60. }
  61. },
  62. watch: {
  63. items() {
  64. this.computeTotal()
  65. },
  66. options(value) {
  67. this.computeOptions(value)
  68. }
  69. },
  70. data() {
  71. return {
  72. total: 0,
  73. defaultOptions: {
  74. currency: {
  75. symbol: '$',
  76. position: 'before',
  77. thousandsSeparator: '.',
  78. decimalPlaces: 2,
  79. decimalSeparator: ','
  80. },
  81. layout: {
  82. width: '300px',
  83. height: '100%'
  84. }
  85. }
  86. }
  87. }
  88. }
  89. </script>
  90. <style lang="sass">
  91. @import '../../assets/variables'
  92. .cart
  93. border-left: 1px solid $app-border-color
  94. padding-left: 10px
  95. display: inline-block
  96. vertical-align: top
  97. .cart-total
  98. width: 100%
  99. height: 50px
  100. .currency-cart-total
  101. width: 100%
  102. height: 50px
  103. margin: 0
  104. font-size: 30pt
  105. .cart-items-wrapper
  106. width: 100%
  107. height: calc(100% - 100px)
  108. overflow-y: auto
  109. overflow-x: hidden
  110. .cart-items
  111. width: 100%
  112. padding: 0
  113. margin: 0
  114. .list-enter-active, .list-leave-active
  115. transition: all 0.3s
  116. .list-enter, .list-leave-to
  117. opacity: 0
  118. transform: translateX(300px)
  119. </style>