funciona enviar correo a editoriales

src/view/contacto.vue

@@ -16,38 +16,54 @@
 
         <form class="my-5">
           <div class="form-group row">
-            <div class="col-6 d-flex flex-column justify-content-around ">
-              <div class="form-group row d-flex  justify-content-between">
+           
+            <div class="col-12 col-md-12 col-xl-7 col-lg-7 d-flex flex-column justify-content-around ">
+              <div class="form-group row d-flex  justify-content-between align-items-center">
                 <label for="formGroupExampleInput">Nombre</label>
                 <div class="col-sm-8">
                   <input
                     type="text"
                     class="form-control"
                     id="formGroupExampleInput"
+                    v-model="nombre"
                   />
                 </div>
               </div>
 
-              <div class="form-group row d-flex  justify-content-between">
+              <div class="form-group row d-flex my-4  justify-content-between">
                 <label for="inputEmail3">Correo electrónico</label>
                 <div class="col-sm-8">
-                  <input type="email" class="form-control" id="inputEmail3" />
+                  <input
+                    type="email"
+                    class="form-control"
+                    id="inputEmail3"
+                    v-model="correo"
+                  />
                 </div>
               </div>
             </div>
 
-            <div class="col-6">
+            <div class="col-12 col-md-8 col-lg-8 col-xl-8 mx-auto mt-3">
               <div class="form-group">
                 <label for="comment">Comentario</label>
-                <textarea class="form-control" rows="5" id="comment"></textarea>
+                <textarea
+                  class="form-control"
+                  rows="5"
+                  id="comment"
+                  v-model="mensaje"
+                ></textarea>
               </div>
             </div>
           </div>
-          <button type="submit" class="btn btn-primary mt-5">Enviar</button>
+          <button type="submit" class="btn btn-primary mt-5" @click="enviar()"
+          v-show="nombre != '' && correo !='' && mensaje !='' "
+          >
+            Enviar
+          </button>
         </form>
       </div>
     </div>
-
+   
     <Footer></Footer>
   </div>
 </template>
@@ -57,12 +73,77 @@ import Header from "./../components/header.vue";
 import Nav from "./../components/nav.vue";
 import Nav2 from "./../components/nav2.vue";
 import Footer from "./../components/footer.vue";
+
+import axios from "axios";
+import config from "../config/config.js";
+import Swal from 'sweetalert2'
+
+
+
 export default {
   components: {
     Header,
     Nav,
     Nav2,
     Footer
+  },
+  data() {
+    return {
+      nombre: '',
+      correo: '',
+      mensaje: ''
+    };
+  },
+
+  methods: {
+    async enviar() {
+
+      if (this.nombre == "") return alert("falta agregar nombre")
+      if (this.mensaje == "") return alert("falta agregar comentario")
+      if (this.correo == "") return alert("falta agregar correo")
+
+ let arroba = 0;
+
+          for (let i = 0; i < this.correo.length; i++) {
+            if (`${this.correo[i]}` === `@`) arroba=1;
+          }
+
+          if(!arroba) return alert("El correo no es valido");
+  
+
+
+
+      await axios
+        .post(`${config.api}/email`, {
+          correo: this.correo,
+          mensaje: this.mensaje,
+          nombre:this.nombre
+        })
+        .then(function(response) {
+
+     Swal.fire({
+ 
+  icon: 'success',
+  title: 'Correo enviado correctamente',
+  showConfirmButton: false,
+  timer: 2000
+})
+          console.log(response);
+        })
+        .catch(function(error) {
+
+   Swal.fire({
+  icon: 'error',
+  title: 'Oops...',
+  text: 'hubo un error. Intentalo más tarde ',
+  
+        })
+          console.log(error);
+        });
+
+    
+     
+    }
   }
 };
 </script>