arakrail/pages/_lang/contact/index.vue

<template>
  <div class="page contact--page">
    <Hero :title="staticData.hero"/>
    <section class="s1">
      <div class="container">
        <div class="panel">
          <div class="row">
            <div class="col-12 p1">
              <h2 class="title">{{ staticData.t1 }}</h2>
              <!--							<p>{{staticData.t2}}</p>-->
            </div>
            <div class="col-12 p2">
              <ul>
                <li>
                  <i class="fas fa-map-marker-alt"></i>
                  <span>{{ $store.state.global.address[$route.params.lang] }}</span>
                </li>
                <li>
                  <i class="fas fa-phone"></i>
                  <a :href="'tel:' + $store.state.global.tell">
                    <span>{{ staticData.t15 }}</span>
                    <b class="phone-number">{{ $store.state.global.tell_view }}</b>
                  </a>
                  -
                  <a :href="'tel:' + $store.state.global.fax">
                    <span>{{ staticData.t16 }}</span>
                    <b class="phone-number">{{ $store.state.global.fax_view }}</b>
                  </a>
                </li>
                <li>
                  <i class="fas fa-envelope"></i>
                  <a :href="'mailto:' + $store.state.global.email">{{ $store.state.global.email }}</a>
                </li>
              </ul>
            </div>
            <div class="col-12 p3">
              <hr>
              <b>{{ staticData.t4 }}</b>
              <p>{{ staticData.t5 }}</p>
              <ul>
                <li>
                  <a :href="$store.state.global.instagram_url" target="_blank">
                    <i class="fab fa-instagram"></i>
                  </a>
                </li>
                <li>
                  <a :href="$store.state.global.linkedin_url" target="_blank">
                    <i class="fab fa-linkedin-in"></i>
                  </a>
                </li>
              </ul>
            </div>
            <div class="col-12 p4">
              <div class="mapouter">
                <div class="gmap_canvas">
                  <iframe id="gmap_canvas"
                          src="https://maps.google.com/maps?q=%D8%A7%D8%B1%D8%A7%DA%A9%20%D8%B1%DB%8C%D9%84%20%D8%8C%D8%A7%D8%B3%D8%AA%D8%A7%D9%86%20%D9%85%D8%B1%DA%A9%D8%B2%DB%8C%D8%8C%20%D8%A7%D8%B1%D8%A7%DA%A9%D8%8C%20%D8%B4%D9%87%D8%B1%DA%A9%20%D9%82%D8%B7%D8%A8%20%D8%B5%D9%86%D8%B9%D8%AA%DB%8C%D8%8C%20%D8%AE%DB%8C%D8%A7%D8%A8%D8%A7%D9%86%20%D8%AA%D9%84%D8%A7%D8%B4%D8%8C%20%D9%87%D9%85%D8%AA&t=&z=13&ie=UTF8&iwloc=&output=embed"
                          frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
                  </iframe>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="s2">
      <div class="container">
        <div class="panel">
          <div class="row">
            <div class="col-12">
              <h2>{{ staticData.t6 }}</h2>
              <form class="form" @submit.prevent="upload">
                <div class="row">
                  <div class="col-12">
                    <div class="formRow center-align" :class="validation.reason ? 'err' : null">
                      <select name="reason" v-model="formData.reason">
                        <option disabled selected :value="false">{{ staticData.t7 }}</option>
                        <option v-for="item in reasons" :key="item._id" :value="item.reason_details.fa.reason">{{ item.reason_details[$route.params.lang].reason }}</option>
                      </select>
                      <p v-if="validation.reason">{{ validation.reason.msg }}</p>
                    </div>
                  </div>
                  <div class="col-12 col-lg-6">
                    <div class="formRow" :class="validation.first_name ? 'err' : null">
                      <input type="text" :placeholder="staticData.t8" name="first_name" v-model="formData.first_name">
                      <p v-if="validation.first_name">{{ validation.first_name.msg }}</p>
                    </div>
                  </div>
                  <div class="col-12 col-lg-6">
                    <div class="formRow" :class="validation.last_name ? 'err' : null">
                      <input type="text" :placeholder="staticData.t9" name="last_name" v-model="formData.last_name">
                      <p v-if="validation.last_name">{{ validation.last_name.msg }}</p>
                    </div>
                  </div>
                  <div class="col-12 col-lg-6">
                    <div class="formRow" :class="validation.phone_number ? 'err' : null">
                      <input type="text" :placeholder="staticData.t10" name="phone_number" v-model="formData.phone_number">
                      <p v-if="validation.phone_number">{{ validation.phone_number.msg }}</p>
                    </div>
                  </div>
                  <div class="col-12 col-lg-6">
                    <div class="formRow" :class="validation.email ? 'err' : null">
                      <input type="text" :placeholder="staticData.t11" name="email" v-model="formData.email">
                      <p v-if="validation.email">{{ validation.email.msg }}</p>
                    </div>
                  </div>
                  <div class="col-12">
                    <div class="formRow" :class="validation.message ? 'err' : null">
                      <textarea :placeholder="staticData.t12" name="message" v-model="formData.message"></textarea>
                      <p v-if="validation.message">{{ validation.message.msg }}</p>
                    </div>
                  </div>
                  <div class="col-12">
                    <div class="formRow center-align">
                      <button type="submit" class="btn btn-primary-fill">{{ staticData.t13 }}</button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        reason: false,
        first_name: '',
        last_name: '',
        phone_number: '',
        email: '',
        message: '',
        locale: this.$route.params.lang
      },
      reasons: null,
      validation: {}
    }
  },
  computed: {
    staticData() {
      return this.$store.state.staticData.contact[this.$route.params.lang]
    }
  },
  methods: {
    upload() {
      this.validation = {}
      const data = this.formData
      this.$axios.post(`/api/public/contact`, data)
          .then(res => {
            this.$message({
              message: this.staticData.t14,
              type: 'success'
            })
            this.formData = {
              reason: false,
              first_name: '',
              last_name: '',
              phone_number: '',
              email: '',
              message: '',
              locale: this.$route.params.lang
            }
          })
          .catch(err => {
            if (err.response.status === 422) this.validation = err.response.data.validation
            else console.log(err.response.data.message)
          })
    }
  },
  head() {
    return {
      title: this.staticData.hero
    }
  },
  async asyncData({$axios, error}) {
    try {
      const reasons = await $axios.get(`/api/public/contact/reason`)
      return {
        reasons: reasons.data
      }
    } catch (e) {
      error({status: 404, message: 'There is a problem here'})
    }
  }
}
</script>

<style>
.mapouter{
  position: relative;
  text-align: right;
  height: 500px;
  width: 100%;
}

.gmap_canvas{
  overflow: hidden;
  background: none !important;
  height: 500px;
  width: 100%;
}

#gmap_canvas{
  width: 100%;
  height: 100%;
}
</style>