nawame/resources/views/test.blade.php

@extends('views.layouts.master')
@push('css')
    <link rel="stylesheet" href="{{ csset('/themes/pro/nawame/resources/css/user-auth.css') }}">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
@endpush

@section('content')
    <div class="user-form-part">
        <div class="container">
{{--            <div class="row justify-content-center">--}}
{{--                <div class="col-md-8">--}}
{{--                    <p><button @click="clickBtn1">버튼1</button></p>--}}
{{--                    <div class="alert alert-success" role="alert">@{{ addr1 }}</div>--}}

{{--                    <p><button @click="clickBtn2">버튼2</button></p>--}}
{{--                    <div class="alert alert-success" role="alert">@{{ addr2 }}</div>--}}
{{--                </div>--}}
{{--            </div>--}}

            <div class="text-center text-danger" v-if="!items.length">카트가 비어있습니다.</div>
            <div v-for="item in items" class="text-danger text-center mt-3 d-flex align-items-center justify-content-center">
                <div class="mr-2">
                    @{{ item['C4'] }} <span class="text-success">@{{ itemPrice(item['C6']) }} 원</span>
                </div>
                <div class="d-flex align-items-center justify-content-center mt-3">
                    <button class="btn" v-bind:disabled="textValue" @click="deleteCart(item['Id'])">
                        카트 삭제
                    </button>
                </div>

            </div>

            <div class="text-center mt-4">
                합계: @{{ totalItem }} 원
            </div>
        </div>

        @include('views.address', ['ref' => 'address1', 'addressSelected' => 'addressSelected1'])
        @include('views.address', ['ref' => 'address2', 'addressSelected' => 'addressSelected2'])
    </div>
@endsection


@push('js')
    <script>
        var vm = new Vue({
            el: '#app',
            data: function () {
                return {
                    addr1: '선택주소1',
                    addr2: '선택주소2',
                    listType1Book: @json($listType1Book),
                    items: [],
                    textValue: false
                };
            },

            computed: {
                totalItem: function() {
                    let sum = 0;
                    for(let i = 0; i < this.items.length; i++){
                        sum += (parseFloat(this.items[i].C6));
                    }

                    return format_decimal(sum, 0);
                }
            },

            created: function () {
                this.items = this.listType1Book['Book']['0']['Page'] ?? [];
            },
            methods: {
                clickBtn1: function (e) {
                    this.$refs.address1.open();
                },
                clickBtn2: function (e) {
                    this.$refs.address2.open();
                },
                addressSelected1: function (data) {
                    this.addr1 = data.roadAddress;
                },
                addressSelected2: function (data) {
                    this.addr2 = data.roadAddress;
                },

                itemPrice: function (price) {
                    return format_decimal(price, 0);
                },

                deleteCart: async function (cart_id) {
                    // console.log(cart_id)
                    // this.items = this.items.filter(item => item['Id'] === 50)
                    // console.log(this.items)

                    this.textValue = true
                    const response = await get_api_data('cart-act', {
                        Page : [ {  Id: Number(`-${cart_id}`) } ]
                    })

                    const self = this
                    show_iziToast_msg(response.data.Page, function () {
                        self.items = self.items.filter(item => item['Id'] !== cart_id)
                        self.textValue = false
                    })

                }
            }
        });
    </script>
@endpush