SitioWebITTEC/js/boletin-vue.js

new Vue({
    el: '#appmodal',
    data: {
        errors: [],
        email: null,
        form: true,
        loader: false,
        respuesta: false,
        imagen: "",
        message: ""
    },
    i18n,
    langnavi: '',
    langstore: '',
    mounted() {
        if (localStorage.getItem("idioma")) {
            this.obtenerIdioma();
        } else {
            this.obtenerGeolocalizaion();
        }

        let cookieBoletin = $cookies.get('boletin');

        if (cookieBoletin == null) {
            setTimeout(function() {
                $('.submenu-conoce').hide('slow');
                $('.submenu-construye').hide('slow');
                $('#ouibounce-modal').show();
            }, 30000);
        }
    },
    methods: {
        cambiarIdioma(idioma) {
            i18n.locale = idioma;
        },
        obtenerGeolocalizaion() {
            navlang = navigator.browserLanguage || navigator.language;
            this.langnavi = navlang.substr(-20, 2);
            i18n.locale = this.langnavi;
        },
        guardarIdioma(idioma) {
            this.langstorage = idioma;
            i18n.locale = this.langstorage;
            localStorage.setItem("idioma", this.langstorage);
        },
        obtenerIdioma() {
            let langs = localStorage.getItem("idioma");
            if (langs == 'es') {
                i18n.locale = 'es';
                this.langnavi = 'es';
            } else if (langs == 'en') {
                i18n.locale = 'en';
                this.langnavi = 'en';
            }
        },
        checkForm: function(e) {
            this.errors = [];
            if (this.email == null || this.email == '') {
                console.log(this.langnavi);
                if (this.langnavi == 'es') {
                    this.errors.push("Es necesario ingresar una dirección de correo electrónico.");
                } else if (this.langnavi == 'en') {
                    this.errors.push("You need to enter an email address.");
                }
            } else if (!this.validEmail(this.email)) {
                if (this.langnavi == 'es') {
                    this.errors.push("Por favor, introduce un correo electrónico válido.");
                } else if (this.langnavi == 'en') {
                    this.errors.push("Please enter a valid email.");
                }
            }
            if (!this.errors.length) {
                this.sendData();
            }
            e.preventDefault();
        },
        validEmail: function(email) {
            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        },
        closeModal() {
            $('#ouibounce-modal').hide();
        },
        sendData() {
            this.loader = true;
            this.form = false,
                axios.post('mysql/suscripcion-boletin.php', {
                    params: {
                        correo: this.email
                    }
                }).then(response => {
                    var objRespuesta = response.data;
                    if (!objRespuesta.error && objRespuesta.respuesta == 'Exito') {
                        this.imagen = "images/shared/success.gif";
                        if (this.langnavi == 'es') {
                            this.message = "Se ha registrado con éxito.";
                        } else if (this.langnavi == 'en') {
                            this.message = "You have registered successfully.";
                        }
                    } else if (objRespuesta.error) {
                        this.imagen = "images/shared/error.gif";
                        if (this.langnavi == 'es') {
                            this.message = "Ups! Ha ocurrido un error, intentalo más tarde.";
                        } else if (this.langnavi == 'en') {
                            this.message = "Oops! An error has occurred, please try again later.";
                        }
                    }
                    this.loader = false;
                    this.respuesta = true;
                    window.$cookies.set("boletin", this.email, "1y", null, null, true, "Lax");
                    setTimeout(function() {
                        $('#ouibounce-modal').hide();
                    }, 3500);

                }).catch(e => {
                    // console.log(e);
                    this.imagen = "images/shared/error.gif";
                    if (this.langnavi == 'es') {
                        this.message = "Ups! Ha ocurrido un error, intentalo más tarde.";
                    } else if (this.langnavi == 'en') {
                        this.message = "Oops! An error has occurred, please try again later.";
                    }
                    this.loader = false;
                    this.respuesta = true;

                    setTimeout(function() {
                        $('#ouibounce-modal').hide();
                    }, 3500);
                });
        }
    }
})