Joywork/js/vue_scripts/object_card_vue.js

var object_card = new Vue({
    el: '#object_card',
    components: {
        vuejsDatepicker: window.vuejsDatepicker
    },
    data() {

        return {
            ru: vdp_translation_ru.js,
            agency_id: $('#session_agency_id').val() || null,
            is_show: false,
            object_id: 0,
            object: [],
            OpenIndicator: {
                render: createElement => createElement('span', { class: { 'vueToggleSpan': true } }),
            },
            photos: [],
            isPreloader: 1,
        }
    },
    methods: {

        //Открытие
        open(object_id, zindex) {
            this.isPreloader = 1;
            if (zindex == 1) {
                $('#object_card .f__modal-bg').css('zIndex', '99988');
            }
            $('#req_form').css('zIndex', '99985');
            $('#modalAutoSearchResults_bg').css('zIndex', '99878');
            $('#modalAutoSearchResults').css('zIndex', '99878');
            if ($('#client-history__bg').css('display') == 'block') {
                $('#client-history__bg').css('zIndex', '99988');
            }
            $("body").addClass("lock");
            this.clear();
            this.is_show = true;

            this.object_id = object_id;
            if ($('#object_card .fotorama').data('fotorama')) {
                $('#object_card .fotorama').data('fotorama').destroy();
                $('#object_card .fotorama').html('');
            }
            setTimeout(function() {
                if (typeof ymaps == 'undefined') {
                    var elem = document.createElement('script');
                    elem.type = 'text/javascript';
                    elem.src = 'https://api-maps.yandex.ru/2.1/?apikey=692f0a05-cb88-4158-88b9-06bc0dc93004&lang=ru_RU&onload=getYaMap';
                    document.getElementById('object_card').appendChild(elem);
                }
            }, 500);

            if (this.object_id > 0) {
                //console.log(this.object_id);

                axios.post('/ajax/ajax_object_vue.php', {
                        request: 'get_object',
                        id: this.object_id,

                    }, )
                    .then((response) => {
                        this.isPreloader = 0;
                        //console.log(response.data);
                        this.object = response.data;
                        this.photos = response.data.photos;
                        this.plan = response.data.plan;
                        html = '';
                        if (!this.isEmpty(this.photos)) {
                            for (var i = 0; i < this.photos.length; i++) {
                                html += '<img src="' + this.photos[i] + '" height="450px">';
                            }
                            if (this.plan) {
                                html += '<img src="' + this.plan + '" height="450px">';
                            }
                        }

                        setTimeout(function() {
                            $('#object_card .fotorama').html(html);
                            $('#object_card .fotorama').fotorama();
                        }, 100);
                        setTimeout(function() {
                            object_card.getYaMap();
                        }, 1000);
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            }

        },

        getYaMap() {
            // Создание карты.

            var latitude = this.object.latitude;
            var longitude = this.object.longitude;

            var myMapCard = new ymaps.Map("map_canvas_card", {
                center: [59.9174455, 30.3250575],
                zoom: 19,
                controls: ['fullscreenControl', 'zoomControl']
            });

            var address = $('#shortAddress').text();

            if (latitude && longitude) {
                var firstGeoObject =  new ymaps.Placemark([
                    Number.parseFloat(latitude).toPrecision(9),
                    Number.parseFloat(longitude).toPrecision(9)
                ], {}, { draggable:false});
                firstGeoObject.options.set('preset', 'islands#darkBlueDotIconWithCaption');
                // Получаем строку с адресом и выводим в иконке геообъекта.
                firstGeoObject.properties.set('iconCaption', address);
                myMapCard.geoObjects.add(firstGeoObject);
                myMapCard.setCenter(firstGeoObject.geometry.getCoordinates(), 14);
            } else {
                ymaps.geocode(address, {results: 1})
                    .then(function (res) {
                        var firstGeoObject = res.geoObjects.get(0),
                            // Координаты геообъекта.
                            coords = firstGeoObject.geometry.getCoordinates(),
                            // Область видимости геообъекта.
                            bounds = firstGeoObject.properties.get('boundedBy');

                        firstGeoObject.options.set('preset', 'islands#darkBlueDotIconWithCaption');
                        // Получаем строку с адресом и выводим в иконке геообъекта.
                        firstGeoObject.properties.set('iconCaption', firstGeoObject.getAddressLine());

                        // Добавляем первый найденный геообъект на карту.
                        myMapCard.geoObjects.add(firstGeoObject);
                        // Масштабируем карту на область видимости геообъекта.
                        myMapCard.setBounds(bounds, {
                            // Проверяем наличие тайлов на данном масштабе.
                            checkZoomRange: true
                        });
                    });
            }
        },


        clear() {
            this.number = null;
            this.date_start = new Date();
            this.date_end = new Date();
            this.days_mes_end = 10;
            this.no_mes_end = 0;
            this.type_contract = 0;
            this.object = [];
            this.clearErrors();
        },

        //Очистка ошибок
        clearErrors() {
            this.errorText = '';
            this.errors = { 'number': 0, 'type': 0, 'celendar': 0 };
            this.errorMes = false;
        },



        //Закрытие
        closes() {
            $('#req_form').css('zIndex', '99988');
            $('#modalAutoSearchResults_bg').css('zIndex', '99880');
            $('#modalAutoSearchResults').css('zIndex', '99881');
            $('#object_card .f__modal-bg').css('zIndex', '99889');
            if ($('#client-history__bg').css('display') == 'block') {
                $('#client-history__bg').css('zIndex', '99998');
            }
            $('.chat-cian').css('zIndex','99999');

            $('#map_canvas_card').html('');
            this.is_show = false;
            $("body").removeClass("lock");
            $('.jw__add-popup').removeClass('is__show');
        },


        //Установка даты
        get_date(date) {
            var arrDate = date.split('.');
            var year = parseInt(arrDate[2]);
            var mes = parseInt(arrDate[1]) - 1;
            var day = parseInt(arrDate[0]);
            return new Date(year, mes, day);
        },



        //Проверка на пустоту
        isEmpty(data) {
            if (typeof(data) === 'object') {
                if (JSON.stringify(data) === '{}' || JSON.stringify(data) === '[]') {
                    return true;
                } else if (!data) {
                    return true;
                }
                return false;
            } else if (typeof(data) === 'string') {
                if (!data.trim()) {
                    return true;
                }
                return false;
            } else if (typeof(data) === 'undefined') {
                return true;
            } else if (data == 0) {
                return true;
            } else {
                return false;
            }
        },

    },
    mounted() {

    },
    created: function() {

        $("#object_card").removeClass("hidden");

    }
})