eiru_pos/src/components/CustomerCard.vue

<template lang="pug">
    .customer-card(@click="selectCustomer(item)" v-bind:class="{ 'selected-customer': isSelectedCustomer() }")
        h2.customer-name {{ item.name }}
        img.customer-photo(:src="this.item.image_medium ? 'data:image/png;base64,' + this.item.image_medium : '/base/static/src/img/avatar.png'")
</template>

<script>
    import { mapActions, mapGetters } from 'vuex'

    export default {
        props: {
            item: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        computed: mapGetters({
            selectedCustomer: 'getSelectedCustomer',
            hasSelectedCustomer: 'hasSelectedCustomer' 
        }),
        methods: {
            isSelectedCustomer() {
                return this.hasSelectedCustomer ? this.item.id === this.selectedCustomer.id : false
            },
            ...mapActions([
                'selectCustomer'
            ])
        }
    }
</script>

<style lang="sass">
    .customer-card
        width: 130px
        height: 160px
        margin: 5px
        border: 1px solid #d3d3d3
        display: inline-block
        position: relative

        &.selected-customer
            transition-duration: 0.3s
            border-bottom: 3px solid #7c7bad

        &:hover
            cursor: pointer

        .customer-name
            width: 100%
            height: 30px
            font-size: 9pt
            text-align: center
            margin-top: 10px
            position: absolute
            top: 0
        
        .customer-photo
            width: 80px
            height: 80px
            margin: 0
            border: none
            position: absolute;
            top: 50%
            left: 50%
            margin-right: -50%
            transform: translate(-50%, -50%)
</style>