ProductCard.vue 2.7 KB

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