ProductCard.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template lang="pug">
  2. .product-card(@click='selectProduct(item)')
  3. h2.product-name {{ item.name }}
  4. img.product-image(:src="item.imageMedium ? 'data:image/png;base64,' + item.imageMedium : '/web/static/src/img/placeholder.png'")
  5. .product-price
  6. span {{ getPrice() }}
  7. </template>
  8. <script>
  9. import { mapActions } from 'vuex'
  10. export default {
  11. props: {
  12. item: {
  13. type: Object,
  14. default: {}
  15. }
  16. },
  17. methods: {
  18. getPrice() {
  19. return this.item.listPrice
  20. },
  21. ...mapActions([
  22. 'selectProduct'
  23. ])
  24. }
  25. }
  26. </script>
  27. <style lang="sass">
  28. .product-card
  29. width: 130px
  30. height: 160px
  31. margin: 5px
  32. border: 1px solid #d3d3d3
  33. display: inline-block
  34. position: relative
  35. &:hover
  36. cursor: pointer
  37. .product-name
  38. width: 100%
  39. height: 30px
  40. font-size: 9pt
  41. text-align: center
  42. margin-top: 10px
  43. position: absolute
  44. top: 0
  45. .product-image
  46. width: 80px
  47. height: 80px
  48. margin: 0
  49. border: none
  50. position: absolute
  51. top: 50%
  52. left: 50%
  53. margin_right: 50%
  54. transform: translate(-50%, -50%)
  55. .product-price
  56. width: 100%
  57. height: 30px
  58. padding-top: 5px
  59. text-align: center
  60. font-size: 10pt
  61. font-weight: bold
  62. background: #7c7bad
  63. color: #fff
  64. position: absolute
  65. bottom: 0
  66. </style>