1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- <template lang="pug">
- .product-card(@click="selectProduct({ data })")
- h2.product-title {{ data.name }}
- img.product-image(:src="this.data.image_medium ? 'data:image/png;base64,' + this.data.image_medium : '/web/static/src/img/placeholder.png'")
- .product-price
- span Gs {{ data.list_price }}
- .product-qty
- </template>
- <script>
- import { mapActions } from 'vuex'
- export default {
- props: {
- data: {
- type: Object,
- default: () => {
- return {}
- }
- }
- },
- computed: {
- // FIXME
- productImage() {
- let img = new Image()
- img.src = this.data.image_medium ? 'data:image/png;base64,' + this.data.image_medium : '/web/static/src/img/placeholder.png'
- return img.src
- }
- },
- methods: {
- // TODO
- drawImage() {
- let ctx = this.$el.querySelector('.product-image').getContext('2d')
- let img = new Image()
- img.onload = () => {
- ctx.drawImage(img, 0, 0, 80, 80)
- }
- console.log(this.data.image_medium)
- img.src = this.data.image_medium ? 'data:image/png;base64,' + this.data.image_medium : '/web/static/src/img/placeholder.png'
- },
- selectVariant() {
- this.$modal.show('variant-selector')
- },
- ...mapActions([
- 'selectProduct'
- ])
- },
- mounted() {
- // this.drawImage()
- // console.log(this)
- }
- }
- </script>
- <style lang="sass">
- .product-card
- width: 130px
- height: 160px
- margin: 5px
- border: 1px solid #d3d3d3
- display: inline-block
- position: relative
- &:hover
- cursor: pointer
- .product-title
- width: 100%
- height: 30px
- font-size: 9pt
- text-align: center
- margin-top: 10px
- position: absolute
- top: 0
- .product-image
- width: 80px
- height: 80px
- margin: 0
- border: none
- position: absolute;
- top: 50%
- left: 50%
- margin-right: -50%
- transform: translate(-50%, -50%)
- .product-price
- width: 100%
- height: 30px
- padding-top: 5px
- text-align: center
- font-size: 10pt
- font-weight: bold
- background: #7c7bad
- color: #fff
- position: absolute
- bottom: 0
- </style>
|