eiru_pos/src/components/CartItem.vue

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

            .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")
                    .cart-item-option(class="fa fa-trash" @click="remove(item)")
</template>

<script>
    import { mapActions } from 'vuex'

    export default {
        props: {
            item: {
                type: Object,
                required: true,
                default: () => {
                    return {}
                }
            },
            symbol: {
                type: String,
                default: '$',
                required: true
            },
            separator: {
                type: String,
                default: '.'
            },
            decimals: {
                type: Number,
                default: 0
            }
        },
        methods: {
            add(item) {
                this.addToCart(item)
            },
            subtract(item) {
                this.subtractFromCart(item)
            },
            remove(item) {
                this.removeFromCart(item)
            },
            getSymbol() {
                return this.symbol
            },
            getPrice() {
                return accounting.formatMoney(this.item.list_price, this.symbol, 0, this.separator, ',')
            },
            getSubtotal() {
                return accounting.formatMoney(this.item.list_price * this.item.qty, this.symbol, 0, this.separator, ',')
            },
            ...mapActions([
                'addToCart',
                'subtractFromCart',
                'removeFromCart'
            ])
        },
        mounted() {
            this.$set(this.item, 'qty', 1)
        }
    }
</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 #0288d1

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