asan-service/components/footer/SiteFooter.vue

<template>
  <footer class="site--footer">
    <div class="container">
      <div class="row">
        <section class="col-12 r1">
          <a :href="`tel: ${config.supportTel}`">
            <span>شماره تماس پشتیبانی: </span>
            <b> {{ config.supportTel }} </b>
          </a>
          <i class="d-none d-md-inline-block"> | </i>
          <br class="d-md-none" />
          <a :href="`mailto: ${config.supportEmail}`">
            <span>ایمیل پشتیبانی: </span>
            <b> {{ config.supportEmail }} </b>
          </a>
        </section>

        <section class="col-12 r2">
          <ul>
            <li>
              <img src="/assets/img/footer/guarantee.svg" alt="icon" />
              <p>ضمانت بلند مدت</p>
            </li>
            <li>
              <img src="/assets/img/footer/service.svg" alt="icon" />
              <p>خدمات با کیفیت</p>
            </li>
            <li>
              <img src="/assets/img/footer/repair.svg" alt="icon" />
              <p>نیروی حرفه ای</p>
            </li>
            <li>
              <img src="/assets/img/footer/learning.svg" alt="icon" />
              <p>آموزش کاربردی</p>
            </li>
            <li>
              <img src="/assets/img/footer/software.svg" alt="icon" />
              <p>نرم افزار به روز</p>
            </li>
            <li>
              <img src="/assets/img/footer/support.svg" alt="icon" />
              <p>پشتیبانی آنلاین</p>
            </li>
          </ul>
        </section>

        <div class="col-12">
          <el-divider></el-divider>
        </div>

        <section class="col-12 r3">
          <nav class="row">
            <div class="col-12 col-sm-4 mb-5 mb-sm-0 r3-1">
              <h3>صفحات اصلی</h3>
              <ul>
                <li>
                  <nuxt-link :to="{ name: 'learning', query: { page: 1 } }">آموزش</nuxt-link>
                </li>
                <li>
                  <nuxt-link :to="{ name: 'download', query: { category: 'all', page: 1 } }">دانلود</nuxt-link>
                </li>

                <li>
                  <nuxt-link :to="{ name: 'agents' }">لیست نمایندگان</nuxt-link>
                </li>
                <li>
                  <nuxt-link :to="{ name: 'representation' }">اخذ نمایندگی</nuxt-link>
                </li>
                <li>
                  <nuxt-link :to="{ name: 'contact' }">ارتباط با ما</nuxt-link>
                </li>
                <li>
                  <nuxt-link :to="{ name: 'about' }">درباره ما</nuxt-link>
                </li>
              </ul>
            </div>
            <div class="col-12 col-sm-4 mb-5 mb-sm-0 r3-2">
              <h3>خدمات مشتریان</h3>
              <ul>
                <li v-if="help && help.helpId">
                  <nuxt-link :to="{ name: 'learning-post+', params: { post: help.helpId.title } }"
                    >راهنمای ثبت گارانتی</nuxt-link
                  >
                </li>
                <li>
                  <nuxt-link :to="{ name: 'index' }">استعلام گارانتی</nuxt-link>
                </li>
                <li>
                  <nuxt-link :to="{ name: 'warranty-terms', query: { page: 1 } }">شرایط گارانتی</nuxt-link>
                </li>
                <li>
                  <nuxt-link :to="{ name: 'FAQ' }">سوالات متداول</nuxt-link>
                </li>

                <li>
                  <nuxt-link :to="{ name: 'account-post' }">ارسال کالا برای گارانتی</nuxt-link>
                </li>
              </ul>
            </div>
            <div class="col-12 col-sm-4 mb-5 mb-sm-0 r3-3">
              <h3>با ما همراه باشید</h3>
              <ul>
                <li>
                  <a :href="config.whatsApp" target="_blank">
                    <img src="/assets/img/footer/whatsapp.svg" alt="icon" />
                  </a>
                </li>
                <li>
                  <a :href="config.instagram" target="_blank">
                    <img src="/assets/img/footer/instagram.svg" alt="icon" />
                  </a>
                </li>
                <li>
                  <a :href="config.aparat" target="_blank">
                    <img src="/assets/img/footer/aparat.svg" alt="icon" />
                  </a>
                </li>
              </ul>

              <div class="newsletter">
                <h3>از اخبار مطلع شوید</h3>
                <div class="inputBox">
                  <input v-model="newsletter" type="text" placeholder="ایمیل خودرا وارد کنید" />
                  <button :disabled="!newsletter.length" @click="registerNewsletter">ثبت</button>
                </div>
              </div>
            </div>
          </nav>
        </section>

        <section class="col-12 apps">
          <div class="btns">
            <button id="showPwaDialog">
              <img src="/assets/img/footer/pwaApp.png" alt="icon" />
            </button>
            <button>
              <a :href="config.andoridAppURL" target="_blank">
                <img src="/assets/img/footer/androidApp.png" alt="icon" />
              </a>
            </button>
          </div>
        </section>

        <section class="col-12 r4">
          <div class="bg">
            <div class="container-fluid">
              <div class="row">
                <div class="col-12 col-md-6 logo">
                  <nuxt-link id="footerTitle" :to="{ name: 'index' }">
                    <Logo />
                  </nuxt-link>
                </div>
                <div class="col-12 col-md-6 companies">
                  <ul>
                    <li>
                      <img src="/assets/img/footer/sony.png" alt="logo" />
                    </li>
                    <li>
                      <img src="/assets/img/footer/apple.png" alt="logo" />
                    </li>
                    <li>
                      <img src="/assets/img/footer/panatech.png" alt="logo" />
                    </li>
                    <li>
                      <img src="/assets/img/footer/verity.png" alt="logo" />
                    </li>
                    <li>
                      <img src="/assets/img/footer/nintendo.png" alt="logo" />
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section class="col-12 r5">
          <h3>آسان سرویس اجرا کننده خدمات پس از فروش</h3>
          <p>
            امروزه یکی از ارکان اصلی شرکت های تولیدی صنعتی و برندهای تجاری ارائه خدمات پس از فروش است و رضایتمندی
            مشتریان از نحوه رسیدگی به هنگام و آگاهی از روند انجام خدمات پس از فروش نقش بسزایی در روند توسعه برندهای
            تجاری دارد . آسان سرویس به عنوان بازوی اجرایی خدمات پس از فروش شرکت تولیدی صنعتی پخش صبا درصدد است با به
            کارگیری صحیح از منابع انسانی متخصص و نیز مدیریت واحدهای مختلف دپارتمان خدمات پس از فروش ، رضایت مشتریان
            گرامی را از لحظه ورود محصول تا انجام خدمت به صورت مطلوب تامین نماید .
          </p>
          <div class="btns">
            <nuxt-link :to="{ name: 'about' }">
              <span>بیشتر بخوانید</span>
              <i class="fas fa-angle-left"></i>
            </nuxt-link>
          </div>
        </section>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <section class="col-12 r6">
          <a id="copyright" :href="config.copyrightURL" target="_blank">
            Designed and Developed in {{ config.copyrightName }}
          </a>
        </section>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      newsletter: '',
      help: null
    }
  },
  computed: {
    config() {
      return this.$config
    }
  },
  mounted() {
    // fetch help page info
    this.$axios.get('/api/public/help?front=true').then(res => (this.help = res.data))

    // split text
    const copyright = new this.$ATextSplitter({ rtl: false, letterSpace: 3, wordSpace: 7 })
    copyright.injectToElement('copyright')

    // animate text
    this.$gsap
      .timeline({ repeat: -1 })
      .from($('#copyright .tsLetters'), { opacity: 0.2, duration: 0.7, stagger: 0.08 })
      .to($('#copyright .tsLetters'), { opacity: 0.2, duration: 0.7, stagger: 0.08 }, 0.4)
  },
  methods: {
    registerNewsletter() {
      this.newsletter = ''
      return this.$message({
        type: 'warning',
        message: 'مشکلی در ثبت اطلاعات پیش آمده'
      })
    }
  }
}
</script>