123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 |
- <template lang="pug">
- li.cart-item(:class="{'cart-item-invalid': !isValid()}")
- h3.item-name {{ item.displayName }}
- input.item-quantity(type='number' v-model.number='quantity' @focus='onFocus' @blur='onBlur')
- span.item-x x
- span.item-price {{ item.price | currency(...options) }}
- span.item-equals =
- span.item-subtotal {{ (item.price * (item.quantity || 1)) | currency(...options) }}
- .cart-item-options-wrapper
- .cart-item-options
- .cart-item-option(class='fa fa-plus' @click='onClickIncrement')
- .cart-item-option(class='fa fa-minus' @click='onClickDecrement')
- .cart-item-option(class='fa fa-money' @click='onClickMoney')
- .cart-item-option(class='fa fa-undo' @click='onClickUndo')
- .cart-item-option(class='fa fa-trash' @click='onClickDelete')
- </template>
- <script>
- export default {
- props: {
- index: {
- type: Number,
- default: -1,
- required: true
- },
- item: {
- type: Object,
- default: null
- },
- options: {
- type: Object,
- default: {
- symbol: '$',
- position: 'before',
- thousandsSeparator: '.',
- decimalPlaces: 2,
- decimalSeparator: ','
- }
- }
- },
- computed: {
- quantity: {
- get() {
- return this.item.quantity
- },
- set(value) {
- this.input = !value ? 1 : value
- if (this.editing) {
- this.handleEditing(value)
- return
- }
- this.computeQuantity()
- }
- }
- },
- watch: {
- item: {
- handler(value) {
- this.onChange(value)
- },
- deep: true,
- immediate: true
- }
- },
- methods: {
- handleEditing(value) {
- if (value === '') {
- clearTimeout(this.inputDaemon)
- return
- }
- if (this.inputDaemon !== null) {
- clearTimeout(this.inputDaemon)
- }
- this.inputDaemon = setTimeout(() => {
- this.computeQuantity()
- }, 300)
- },
- computeQuantity() {
- if (this.input > this.item.quantity) {
- this.onClickIncrement()
- } else {
- this.onClickDecrement()
- }
- },
- onFocus() {
- this.editing = true
- this.input = 0
- },
- onBlur() {
- this.editing = false
- this.input = 0
- },
- onInputChange(e) {
- console.log(e)
- },
- onChange(item) {
- this.$emit('onChange', item)
- },
- onClickIncrement() {
- this.$emit('onClickIncrement', {
- id: this.item.id,
- quantity: this.editing ? this.input : 1
- })
- },
- onClickDecrement() {
- this.$emit('onClickDecrement', {
- id: this.item.id,
- quantity: this.editing ? this.input : -1
- })
- },
- onClickMoney() {
- this.$emit('onClickMoney', this.item)
- },
- onClickUndo() {
- this.$emit('onClickUndo', this.item)
- },
- onClickDelete() {
- this.$emit('onClickDelete', {
- id: this.item.id
- })
- },
- isValid() {
- return this.item.price > 0
- }
- },
- data() {
- return {
- editing: false,
- input: 0,
- inputDaemon: null
- }
- }
- }
- </script>
- <style lang="sass">
- @import '../../assets/variables'
- .cart-item
- width: 100%
- height: 90px
- list-style: none outside none
- border-bottom: 1px solid $app-border-color
- box-sizing: border-box
- position: relative
- &.cart-item-invalid
- border-bottom: 2px solid $app-error-color
- &:nth-child(1)
- border-top: 1px solid $app-border-color
- &:hover
- transition-duration: 1000ms
- border-bottom: 2px solid $app-main-color
- .item-name
- width: 100%
- height: 20px
- margin: 10px 0 5px 0
- float: left
- font-size: 8pt
- display: inline-block
- .item-quantity
- width: 60px
- height: 28px
- margin-top: 6px
- text-align: right
- float: left
- display: inline-block
- user-select: none
- cursor: pointer
- border-radius: 0
- .item-x
- width: 20px
- height: 20px
- margin-top: 12px
- text-align: right
- float: left
- display: inline-block
- .item-price
- width: 80px
- height: 20px
- margin-top: 12px
- text-align: right
- float: left
- display: inline-block
- .item-equals
- width: 20px
- height: 20px
- margin-top: 12px
- text-align: center
- float: left
- display: inline-block
- .item-subtotal
- width: 100px
- height: 20px
- margin-top: 12px
- text-align: right
- font-weight: bold
- display: inline-block
- .cart-item-options-wrapper
- width: 100%
- height: 20px
- position: absolute
- bottom: 0
- display: flex
- justify-content: center
- .cart-item-options
- width: 120px
- 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-undo:hover
- color: #3f51b5
- &.fa-trash:hover
- color: #f44336
- </style>
|