call api contact

pages/home-page/contact/index.vue

@@ -37,12 +37,12 @@
           <h4 class="font-weight-light">
             Your email address will not be published. Required fields are marked *
           </h4>
-          <v-textarea outlined auto-grow placeholder="Comment*" />
+          <v-textarea v-model="comment" outlined auto-grow placeholder="Comment*" :rules="requiredRules" />
           <v-row>
-            <v-col><v-text-field outlined placeholder="Name" /></v-col>
-            <v-col><v-text-field outlined placeholder="Email" /></v-col>
+            <v-col><v-text-field v-model="name" outlined placeholder="Name" :rules="requiredRules" /></v-col>
+            <v-col><v-text-field v-model="mail" outlined placeholder="Email" :rules="requiredRules" /></v-col>
           </v-row>
-          <V-btn class="post-btn">
+          <V-btn class="post-btn" @click="sendMailContact">
             POST COMMENT
           </V-btn>
         </v-row>
@@ -133,12 +133,42 @@ export default {
           subtitle2: 'phone:0965615899'
         }
       ],
+      requiredRules: [
+        v => !!v || 'This field is required'
+      ],
       comment: '',
       name: '',
-      email: ''
+      mail: ''
+    }
+  },
+  methods: {
+    async sendMailContact () {
+      const self = this
+      const fd = new FormData()
+      fd.append('mail', this.mail)
+      fd.append('name', this.name)
+      fd.append('comment', this.comment)
+      const resp = await this.$axios.post('/contact/send-mail-contact', fd, {
+        headers: {
+          Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+        }
+      }).then(function (response) {
+        self.$toast.success('Send Mail Success!', {
+          duration: 10000
+        })
+      })
+        .catch(function (errors) {
+          console.log(errors)
+          const message = errors.response.data
+          self.$toast.error('Send Mail Success!', {
+        //   duration: 10000
+        // })
+        })
+      console.log(resp)
     }
   }
 }
+
 // eslint-disable-next-line eol-last
 </script>
 

plugins/axios.js

 export default function ({ $axios }, inject, redirect) {
-  $axios.onError((error) => {
-    if (error.response.status === 500) {
-      redirect('/500')
-    }
-  })
+  // $axios.onError((error) => {
+  //   if (error.response.status === 500) {
+  //     redirect('/500')
+  //   }
+  // })
 
-  $axios.onError((error) => {
-    const code = parseInt(error.response && error.response.status)
-    if (code === 400) {
-      redirect('/400')
-    }
-  })
+  // $axios.onError((error) => {
+  //   const code = parseInt(error.response && error.response.status)
+  //   if (code === 400) {
+  //     redirect('/400')
+  //   }
+  // })
 
-  $axios.onError((error) => {
-    const code = parseInt(error.response && error.response.status)
-    if (code === 403) {
-      redirect('/login')
-    }
-  })
+  // $axios.onError((error) => {
+  //   const code = parseInt(error.response && error.response.status)
+  //   if (code === 403) {
+  //     redirect('/login')
+  //   }
+  // })
 
   const api = $axios.create({
     headers: {