ProductCard.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <template lang="pug">
  2. .product-card(@click="selectProduct({ item })")
  3. h2.product-title {{ item.name }}
  4. img.product-image(:src="this.item.image_medium ? 'data:image/png;base64,' + this.item.image_medium : '/web/static/src/img/placeholder.png'")
  5. .product-price
  6. span {{ getPrice() }}
  7. .product-qty
  8. </template>
  9. <script>
  10. import { mapActions } from 'vuex'
  11. export default {
  12. props: {
  13. item: {
  14. type: Object,
  15. default: () => {
  16. return {}
  17. }
  18. },
  19. symbol: {
  20. type: String,
  21. default: '$',
  22. required: true
  23. },
  24. separator: {
  25. type: String,
  26. default: '.'
  27. },
  28. decimals: {
  29. type: Number,
  30. default: 0
  31. }
  32. },
  33. computed: {
  34. // FIXME
  35. productImage() {
  36. let img = new Image()
  37. img.src = this.item.image_medium ? 'data:image/png;base64,' + this.item.image_medium : '/web/static/src/img/placeholder.png'
  38. return img.src
  39. }
  40. },
  41. methods: {
  42. getPrice() {
  43. return accounting.formatMoney(this.item.list_price, this.symbol, this.decimals, this.separator, ',')
  44. },
  45. selectVariant() {
  46. this.$modal.show('variant-selector')
  47. },
  48. ...mapActions([
  49. 'selectProduct'
  50. ])
  51. }
  52. }
  53. </script>
  54. <style lang="sass">
  55. .product-card
  56. width: 130px
  57. height: 160px
  58. margin: 5px
  59. border: 1px solid #d3d3d3
  60. display: inline-block
  61. position: relative
  62. &:hover
  63. cursor: pointer
  64. .product-title
  65. width: 100%
  66. height: 30px
  67. font-size: 9pt
  68. text-align: center
  69. margin-top: 10px
  70. position: absolute
  71. top: 0
  72. .product-image
  73. width: 80px
  74. height: 80px
  75. margin: 0
  76. border: none
  77. position: absolute;
  78. top: 50%
  79. left: 50%
  80. margin-right: -50%
  81. transform: translate(-50%, -50%)
  82. .product-price
  83. width: 100%
  84. height: 30px
  85. padding-top: 5px
  86. text-align: center
  87. font-size: 10pt
  88. font-weight: bold
  89. background: #7c7bad
  90. color: #fff
  91. position: absolute
  92. bottom: 0
  93. </style>