ostandari/pages/_portal/contact/index.vue

<template>
  <div class="contact-page">
    <div class="container">
      <div class="row">
        <main class="col-12 col-right">
          <section class="s1-right">
            <div class="row">
              <div class="col-12 col-lg-6 s1-col1-right">
                <h2 class="s1-col1-title">تماس با ما</h2>
                <p class="s1-col1-desc">برای ارتباط با ما میتوانید از طریق فرم زیر اقدام نمایید</p>

                <form @submit.prevent="post">
                  <div class="formRow" :class="validation.name ? 'err' : null">
                    <input v-model="message.name" class="input" name="name" type="text"
                           placeholder="نام و نام خانوادگی خود را وارد کنید"/>
                    <p v-if="validation.name">{{ validation.name.msg }}</p>
                  </div>
                  <div class="formRow" :class="validation.email ? 'err' : null">
                    <input v-model="message.email" class="input" name="email" type="text" placeholder="ایمیل خود را وارد کنید"/>
                    <p v-if="validation.email">{{ validation.email.msg }}</p>
                  </div>
                  <div class="formRow" :class="validation.description ? 'err' : null">
                    <textarea v-model="message.description" name="description" class="input" rows="4" placeholder="توضیحات خود را وارد کنید"></textarea>
                    <p v-if="validation.description">{{ validation.description.msg }}</p>
                  </div>

                  <div class="row view-captcha">
                    <div class="formRow" :class="validation.captcha ? 'err' : null">
                      <input v-model="message.captcha" class="input" name="captcha" type="text" placeholder="متن داخل عکس را وارد کنید"/>
                    </div>
                    <div class="new-captcha">
                      <div class="captcha" v-html="captcha"></div>
                      <button @click="reloadCaptcha" type="button" class="btn btn-primary">
                        <i class="fas fa-sync-alt"></i>
                      </button>
                    </div>

                    <p class="err-captcha" v-if="validation.captcha">{{ validation.captcha.msg }}</p>

                  </div>

                  <div class="btnSub">
                    <button class="btn-link" type="submit">ارسال</button>
                    <!-- <nuxt-link >SUBMIT NOW</nuxt-link> -->
                  </div>
                </form>
              </div>
              <div class="col-12 col-lg-6 mt-5 mt-lg-0 s1-col2-right">
                <div class="mapouter">
                  <div class="bg-map"></div>
                  <div class="gmap_canvas">
                    <iframe id="gmap_canvas"
                            src="https://maps.google.com/maps?q=%D8%A7%D8%B3%D8%AA%D8%A7%D9%86%D8%AF%D8%A7%D8%B1%DB%8C%20%D9%85%D8%B1%DA%A9%D8%B2%DB%8C&t=&z=13&ie=UTF8&iwloc=&output=embed"
                            frameborder="0"
                            scrolling="no" marginheight="0" marginwidth="0"></iframe>
                    <a href="https://fmovies2.org"></a><br>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <section class="s2-right">
            <div class="row">
              <div class="col-12 col-md-4">
                <div class="s2-right-title">
                  <i class="far fa-envelope"></i>
                  <h4>ایمیل</h4>
                </div>
                <a class="s2-right-desc email" :href="`mailto: ${yearBanner.email}`">{{ yearBanner.email }}</a>
              </div>
              <div class="col-12 col-md-4">
                <div class="s2-right-title">
                  <i class="far fa-map-marker-alt"></i>
                  <h4>آدرس</h4>
                </div>
                <p class="s2-right-desc">اراک ، بلوار فاطمیه ، استانداری مرکزی</p>
              </div>
              <div class="col-12 col-md-4">
                <div class="s2-right-title">
                  <i class="far fa-phone-alt"></i>
                  <h4>تلفن</h4>
                </div>
                <a class="s2-right-desc phone" href="tel:08633442222">086-33442222</a>
              </div>
            </div>
          </section>
<!--          <section class="s3-right" v-if="info.docs.length">-->

<!--            &lt;!&ndash;              <div class="s3-right-view-title">&ndash;&gt;-->
<!--            &lt;!&ndash;                <h1 class="s3-right-title"></h1>&ndash;&gt;-->
<!--            &lt;!&ndash;                <div class="br"></div>&ndash;&gt;-->
<!--            &lt;!&ndash;              </div>&ndash;&gt;-->
<!--            <LineTxt label="مطالب ویژه"/>-->
<!--            <div class="s3-right-item">-->
<!--              <div class="row">-->
<!--                <div class="col-12 col-md-3" v-for="(item, index) in info.docs" :key="item._id">-->
<!--                  <nuxt-link class="s3-right-title" :to="{name: 'portal-news-details', params: {portal: currentPortal, details: item.title}}" :title="item.title">-->
<!--                    <p>{{ index + 1 }}</p>-->
<!--                    <h4>{{ item.title }}</h4>-->
<!--                  </nuxt-link>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </section>-->
        </main>
<!--        <aside class="d-none d-lg-block col-lg-3 col-left">-->
<!--          <div class="cover" v-for="(item,index) in news.docs" :key="item._id" v-if="index < 4">-->
<!--            <nuxt-link :to="{name: 'portal-news-details', params: {portal: currentPortal, details: item.title}}" :title="item.title">-->
<!--              <img :src="item.thumbCover" :alt="item.title">-->
<!--              <p>{{ item.title }}</p>-->
<!--            </nuxt-link>-->
<!--          </div>-->
<!--        </aside>-->
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      captcha: null,
      message: {
        name: '',
        email: '',
        description: '',
        captcha: '',
        modelName: 'contactus'
      },
      validation: {},
      info: null,
      news: null
    }
  },
  methods: {
    reloadCaptcha() {
      this.$axios.get('/api/public/getCaptcha').then(res => {
        this.captcha = res.data
      })
    },
    post() {
      this.validation = {}
      this.$axios.post('/api/public/addComment', this.message)
          .then(res => {
            this.reloadCaptcha()
            this.$message({
              type: 'success',
              message: 'پیام شما با موفقیت ارسال شد'
            })
            this.message = {
              name: '',
              email: '',
              description: '',
              captcha: '',
              modelName: 'contactus'
            }
          })
          .catch(e => {
            this.reloadCaptcha()
            if (e.response.status === 422) this.validation = e.response.data.validation
            else console.log(e)
          })
    }
  },
  computed: {
    currentPortal() {
      return this.$route.params.portal
    },
    yearBanner() {
      return this.$store.state.front.yearBanner
    }
  },
  async asyncData({$axios, error, params}) {
    try {

      const request = [
        $axios.get('/api/public/getCaptcha'),
        // $axios.get(`/api/public/getNews?flag=special&portal=${params.portal}`),
        // $axios.get(`/api/public/getNews?flag=new&portal=${params.portal}`)
      ]
      let fetch = await Promise.all(request)
      const [captcha, info, news] = fetch
      return {
        // info: info.data,
        captcha: captcha.data,
        // news: news.data
      }
    } catch (e) {
      error({status: 500, message: 'دریافت اطلاعات با مشکل مواجه شد!'})
    }
  }
}
</script>