BasketComponent

<template>
    <section class="cart-page page-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <table class="table-products table-products--cart">
                        <thead>
                        <tr>
                            <th colspan="3">Товар</th>
                            <th>Количество</th>
                            <th>Стоимость</th>
                            <th>Сумма</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,key) in cart_items" :key="key">
                            <td>
                                <button class="table-products__del table-products__del--small"
                                        @click="deleteItem(item)"><i class="demo-icon icon-delete"></i></button>
                            </td>
                            <td><a :href="item.url" class="table-products__image"><img :src="'/images/uploads/thumbs/'+item.photo.replace(/^.*[\\\/]/, '')" alt=""></a></td>
                            <td class="table-products__info">
                                <div class="table-products__article">Артикул: {{ item.article }}</div>
                                <a :href="item.url" class="table-products__title"> {{ item.title }} </a>
                            </td>
                            <td class="table-products__counts">
                                <small>Количество</small>
                                <div class="number">
                                    <button class="number__btn number__btn--minus" @click="minCount(item)"><i
                                            class="demo-icon icon-minus"></i></button>
                                    {{ item.count }}
                                    <input :key="item.count" type="text" v-model.number="item.count" class="number__input">
                                    <button class="number__btn number__btn--plus" @click="addCount(item)"><i
                                            class="demo-icon icon-plus"></i></button>
                                </div>
                            </td>
                            <td>
                                <div class="table-products__priceblock">
                                    <small>Стоимость</small>
                                    <div class="table-products__price">{{ item.price | formatNumber }} ₽
                                        <div v-if="item.use_discount" class="table-products__oldprice">
                                            {{ item.pricediscount | formatNumber }} ₽
                                        </div>
                                    </div>

                                </div>
                            </td>
                            <td>
                                <div class="table-products__sum">
                                    <small>Сумма</small>
                                    {{ item.price * item.count | formatNumber }} ₽
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="cart-page__total">
                        <p><b>Всего товаров:</b> {{ this.itemsCount }}</p>
                        <p><b>Сумма заказа:</b> {{ this.itemsSum }} руб.</p>
                    </div>
                    <div class="cart-page__btns">
                        <a href="#one-click" class="btn btn--blue btn--one-click popup-with-form"><i
                                class="demo-icon icon-buy"></i> Купить в один клик</a>
                        <a href="/checkout" class="btn btn--blue btn--get-order">оформить заказ <i
                                class="demo-icon icon-next"></i></a>
                    </div>

                </div>
            </div>
            <div class="hidden">
                <form class="form modal-form modal-form--one-click" id="one-click" @submit.prevent>
                    <h3 class="modal-form__title">Купить в один клик</h3>
                    <div class="modal-form__table">
                        <table class="table table--one-click">
                            <thead>
                            <tr>
                                <th>№</th>
                                <th>Артикул</th>
                                <th>Наименование</th>
                                <th>Кол-во</th>
                                <th colspan>Цена</th>
                                <th colspan="2">Стоимость</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, key ,index) in cart_items" :key="key">
                                <td data-title="№"><b>{{ index +1 }}.</b></td>
                                <td data-title="Артикул">{{ item.article }}</td>
                                <td data-title="Наименование">{{  item.title }}</td>
                                <td data-title="Кол-во">{{  item.count }}</td>
                                <td data-title="Цена">{{ item.price | formatNumber }} ₽</td>
                                <td data-title="Стоимость">{{ item.price | formatNumber }} ₽</td>
                                <td><button @click="deleteItem(item)" class="table-products__del table-products__del--small"><i class="demo-icon icon-delete"></i></button></td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="cart-page__total">
                            <p><b>Всего товаров:</b> {{ this.itemsCount }}</p>
                            <p><b>Сумма заказа:</b> {{ this.itemsSum }} руб.</p>
                        </div>
                    </div>

                    <div class="form__fieldset">
                        <div class="form__row">
                            <div class="form__column form__column--33">
                                <div class="form__fieldset">
                                    <legend class="form__legend">Ваше имя <span>*</span></legend>
                                    <input type="text" class="form__input form__input--name" v-model="user.name" placeholder="Введите ваше имя">
                                </div>
                            </div>
                            <div class="form__column form__column--33">
                                <div class="form__fieldset">
                                    <legend class="form__legend">Номер телефона <span>*</span></legend>
                                    <input type="text" class="form__input form__input--phone" v-model="user.phone" placeholder="+7 (___) ___ __ __">
                                </div>
                            </div>
                            <div class="form__column form__column--33">
                                <div class="form__fieldset">
                                    <legend class="form__legend">E-mail  <span>*</span></legend>
                                    <input type="text" class="form__input form__input--email" v-model="user.email" placeholder="email@domen.ru">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form__fieldset">
                        <button class="btn btn--blue" @click="do_checkout">отправить заявку</button>
                    </div>
                    <div class="form__fieldset">
                        <label class="checkbox">
                            <input type="checkbox" v-model="i_agree" />
                            <div class="checkbox__text">Нажимая на кнопку, я принимаю <a href="">условия соглашения.</a></div>
                            <div v-if="order_error && order_error.i_agree" class="form__subtitle form__subtitle--error">{{ order_error.i_agree }}</div>
                        </label>
                    </div>
                </form>
            </div>
        </div>
    </section>
</template>

<script>
    var numeral = require('numeral');
    numeral.register('locale', 'ru', {
        delimiters: {
            thousands: ' ',
            decimal: ','
        },
        abbreviations: {
            thousand: 'k',
            million: 'm',
            billion: 'b',
            trillion: 't'
        },
        ordinal: function (number) {
            return number === 1 ? 'er' : 'ème';
        },
        currency: {
            symbol: ''
        }
    });
    numeral.locale('ru');
    Vue.filter("formatNumber", function (value) {
        return numeral(value).format("0,0"); // displaying other groupings/separators is possible, look at the docs
    });

    export default {

        props: {
            items: {
                type: Object,
                default: () => ({

                })
            },
            from_base: {
                default: false,
            },
            prop_user:{
                type: Object,
                default: () => ({

                })
            },
            auth: {
                default: false,
            },
        },
        data() {
            return {
                cart_items: {},
                is_auth: this.auth,
                i_agree: true,
                fields: {},
                errors: {},
                order_error: {},
                user:this.prop_user,
            }
        },
        computed: {
            itemsCount() {
                let count = 0;
                let items = this.cart_items;
                Object.keys(items).forEach(function (key) {
                    count += items[key].count;
                });
                $('.globalCount-Cart').text(count);
                return count;
            },
            itemsSum() {
                let sum = 0;
                let items = this.cart_items;
                Object.keys(items).forEach(function (key) {
                    sum += items[key].count * items[key].price;
                });

                sum = String(sum).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1 ')
                $('.globalSum-Cart').text(sum);
                return sum;
            }
        },
        methods: {
            do_checkout() {

                this.order_error = {};
                this.checkout_errors = {};
                if (this.user.name == '')
                {
                    this.order_error.customer_name = 'Поле не может быть пустым.';
                }

                if (this.user.phone == '')
                {
                    this.order_error.customer_phone = 'Поле не может быть пустым.';
                }

                if (this.user.email == '')
                {
                    this.order_error.customer_email = 'Поле не может быть пустым.';
                }

                if (this.user.address == '')
                {
                    this.order_error.customer_address = 'Поле не может быть пустым.';
                }
                if (this.i_agree == '')
                {
                    this.order_error.i_agree = 'Вы дожны принять условия.';
                }

                if (Object.keys(this.order_error).length === 0)
                {
                    this.created = true;
                    let data = {};
                    data.user = this.user;
                    data.items = this.cart_items;

                    axios.post('/checkout_order',data,{
                        headers: {
                            'Content-Type': 'application/json',
                        }
                    }).then(response => {
                        $('#done').find('.modal-form__title').text('Заказ оформлен');
                        $('#done').find('.modal-form__subtitle').text('');
                        $.magnificPopup.open({
                            items: {
                                src: '#done',
                            },
                            type: 'inline'
                        });
                        //Очищаем корзину
                        localStorage.removeItem('primusCart');
                        $('.globalCount-Cart').text('');
                        $('.globalSum-Cart').text('');
                        $('.globalCount-Cart').hide();
                        $('.footer-cart-badge').hide();

                        setTimeout(function(){ window.location = "/profile/orders"; },3000);

                    }).catch(error => {
                        if (error.response.status === 422) {
                            this.checkout_errors = error.response.data.errors || {};

                        }
                    }).finally(()=> {
                        this.created = false;
                    });
                }

            },
            addCount(item) {
                item.count = item.count +1;
                this.saveStorage();
            },
            minCount(item) {
                if (item.count > 1) {
                    item.count--;
                    this.saveStorage();
                }

            },
            deleteItem(item) {
                this.$delete(this.cart_items, item.id);
                this.saveStorage();
            },
            saveStorage() {
                localStorage.setItem('primusCart', JSON.stringify(this.cart_items));
            },

        },
        mounted() {
            if (!this.from_base) {
                if (localStorage.getItem('primusCart') !== null) {
                    this.cart_items = JSON.parse(localStorage.getItem('primusCart'));
                }
            }

        }
    }
</script>