barg-restuarant/pages/subscriber-affairs/index.vue

<template>
  <div class="subs--page page--container">
    <section class="s1">
      <div class="subscription--box clearfix relativePos">
        <div class="letters l1">
          <IconsLetters/>
        </div>
        <div class="letters l2">
          <IconsLetters/>
        </div>
        <IconsSubsAfairIcon class="subs--icon"/>

        <form class="form" @submit.prevent="upload">
          <div class="container-fluid">
            <div class="row">

              <div class="col-12 col-lg-6 form--row" :class="validation.full_name ? 'err' : null">
                <label for="name">نام و نام خانوادگی:</label>
                <input type="text" v-model="formData.full_name" id="name">
                <p v-if="validation.full_name">{{ validation.full_name.msg }}</p>
              </div>

              <div class="col-12 col-lg-6 form--row" :class="validation.birth_date ? 'err' : null">
                <label for="birthDate">تاریخ تولد:</label>
                <input type="text" v-model="formData.birth_date" id="birthDate">
                <p v-if="validation.birth_date">{{ validation.birth_date.msg }}</p>
              </div>

              <div class="col-12 col-lg-6 form--row" :class="validation.job ? 'err' : null">
                <label for="job">شغل:</label>
                <input type="text" v-model="formData.job" placeholder="اختیاری" id="job">
                <p v-if="validation.job">{{ validation.job.msg }}</p>
              </div>

              <div class="col-12 col-lg-6 form--row" :class="validation.marrage_date ? 'err' : null">
                <label for="marrageDate">سالگرد ازدواج:</label>
                <input type="text" v-model="formData.marrage_date" placeholder="اختیاری" id="marrageDate">
                <p v-if="validation.marrage_date">{{ validation.marrage_date.msg }}</p>
              </div>

              <div class="col-12 col-lg-6 form--row" :class="validation.email ? 'err' : null">
                <label for="email">ایمیل:</label>
                <input type="email" v-model="formData.email" id="email">
                <p v-if="validation.email">{{ validation.email.msg }}</p>
              </div>

              <div class="col-12 col-lg-6 form--row" :class="validation.mobile ? 'err' : null">
                <label for="phoneNumber">شماره موبایل:</label>
                <input type="text" v-model="formData.mobile" id="phoneNumber">
                <p v-if="validation.mobile">{{ validation.mobile.msg }}</p>
              </div>

              <div class="col-12 form--row" :class="validation.address ? 'err' : null">
                <label for="address">آدرس:</label>
                <input type="text" v-model="formData.address" id="address">
                <p class="addressValidation" v-if="validation.address">{{ validation.address.msg }}</p>
              </div>

              <div class="col-12 form--row">
                <button>
                  <span>ارسال</span>
                  <IconsLeftArrow/>
                </button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  created() {
    if (process.client) $('body').addClass('reverse--theme')
  },
  data() {
    return {
      formData: {
        full_name: '',
        birth_date: '',
        job: '',
        marrage_date: '',
        email: '',
        mobile: '',
        address: ''
      },
      validation: {}
    }
  },
  mounted() {
    //////////////////////////////////////////////////////////////////////////
    const paperPlanAnimation = this.$gsap.timeline({repeat: -1, repeatDelay: 5})
        .to($('#bell'), {rotate: 25, y: -9, x: 7, duration: 0.1})
        .to($('#bell'), {rotate: 0, y: 0, x: 0, duration: 0.1})
        .from($('#paperPlane'), {opacity: 0, y: 25, x: 20, duration: 0.7}, '-=0.5')
        .from($('#paperPlaneL'), {opacity: 0, duration: 0.1}, '-=0.15')
        .from($('#dash path'), {scale: 0, opacity: 0, duration: 0.2, stagger: -0.02}, '-=0.5')
        .from($('#letterText path'), {scale: 0, opacity: 0, duration: 0.7, stagger: 0.2}, '-=0.5')

    const dotsTl = this.$gsap.timeline({repeat: -1, yoyo: true})
        .from($('#circles path'), {opacity: 0, duration: 0.5, stagger: 0.08})

    //////////////////////////////////////////////////////////////////////////
  },
  methods: {
    upload() {
      this.validation = {}
      const data = this.formData

      this.$axios.post('/api/public/subscribers', data)
          .then(response => {
            this.$alert(response.data.message, 'ثبت موفق', {
              confirmButtonText: 'باشه',
              callback: action => {
                this.formData = {
                  full_name: '',
                  birth_date: '',
                  job: '',
                  marrage_date: '',
                  email: '',
                  mobile: '',
                  address: ''
                }
              }
            })
          })
          .catch(error => {
            if (error.response.status === 422) {
              this.validation = error.response.data.validation
              this.$message({
                type: 'error',
                message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
              })
            } else {
              this.$alert(error.response.data.error.message, 'خطا', {
                confirmButtonText: 'باشه'
              })
            }
          })
    }
  }
}
</script>