eiru_pos/src/components/cart/CartItem.vue

<template lang="pug">
        li.cart-item
            h3.item-name {{ item.display_name }}
            input.item-quantity(:value="item.qty" number)
            span.item-x x
            span.item-price {{ formatPrice() }}
            span.item-equals =
            span.item-subtotal {{ formatSubtotal() }}

            .cart-item-options-wrapper
                .cart-item-options
                    .cart-item-option(class="fa fa-plus" @click="add(item)")
                    .cart-item-option(class="fa fa-minus" @click="subtract(item)")
                    .cart-item-option(class="fa fa-money" @click="discount(item)")
                    .cart-item-option(class="fa fa-trash" @click="remove(item)")
</template>

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

    export default {
        props: {
            item: {
                type: Object,
                required: true,
                default: () => {
                    return {}
                }
            }
        },
        computed: mapGetters([
            'currencySymbol'
        ]),
        methods: {
            add(item) {
                this.addToCart(item)
            },
            subtract(item) {
                this.subtractFromCart(item)
            },
            discount(item) {
                this.discountFromCart(item)
            },
            remove(item) {
                this.removeFromCart(item)
            },
            formatPrice() {
                return accounting.formatMoney(this.item.price, this.currencySymbol, 0, '.', ',')
            },
            formatSubtotal() {
                return accounting.formatMoney(this.item.price * this.item.qty, this.currencySymbol, 0, '.', ',')
            },
            ...mapActions([
                'addToCart',
                'subtractFromCart',
                'discountFromCart',
                'removeFromCart'
            ])
        },
        mounted() {
            this.$set(this.item, 'qty', 1)
            this.$set(this.item, 'price', this.item.list_price)
            this.$set(this.item, 'discount', 0)
        }
    }
</script>

<style lang="sass">
    .cart-item
        width: 100%
        height: 90px
        list-style: none outside none
        border-bottom: 1px solid #d3d3d3
        box-sizing: border-box
        position: relative

        &:nth-child(1)
            border-top: 1px solid #d3d3d3

        &:hover
            transition-duration: 1s
            border-bottom: 2px solid #7c7bad

        .item-name
            width: 100%
            height: 20px
            margin: 10px 0 5px 0
            float: left
            font:
                size: 8pt

        .item-quantity
            width: 50px
            height: 28px
            margin-top: 6px
            text-align: right
            float: left

        .item-x
            width: 20px
            height: 20px
            margin-top: 12px
            text-align: center
            float: left

        .item-price
            width: 80px
            height: 20px
            margin-top: 12px
            text-align: right
            float: left

        .item-equals
            width: 20px
            height: 20px
            margin-top: 12px
            text-align: center
            float: left

        .item-subtotal
            width: 100px
            height: 20px
            margin-top: 12px
            padding-right: 15px
            text-align: right
            float: right
            font-weight: bold

        .cart-item-options-wrapper
            width: 100%
            height: 20px
            position: absolute
            bottom: 0
            display: flex
            justify-content: center

            .cart-item-options
                width: 100px
                height: 20px
                border: 1px solid #d3d3d3
                border-bottom: none
                display: flex
                justify-content: center

                .cart-item-option
                    width: 18px
                    height: 18px
                    margin: 0 5px
                    color: #666

                    &:hover
                        cursor: pointer

                    &.fa
                        padding-left: 2px
                        line-height: 20px

                        &.fa-plus:hover
                            color: #2196f3

                        &.fa-minus:hover
                            color: #ffc107

                        &.fa-money:hover
                            color: #4caf50

                        &.fa-trash:hover
                            color: #f44336
</style>