eiru_pos/src/components/ProductCard.vue

<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>