asan-service/pages/index.vue

<template>
  <div class="home--page page">
    <div class="bg"></div>
    <div class="txtBox">
      <div class="container-fluid">
        <div class="row align-items-stretch">
          <div class="col-12 col-lg-5 order-1 order-lg-0">
            <div class="boxBg inquiry">
              <h2>استعلام گارانتی و اصالت کالا</h2>
              <p>
                ضمن خوش آمدگویی شما به مجموعه آسان سرویس چنانچه محصول خریداری شده شما دارای سریال گارانتی میباشد
                میتوانید با وارد کردن سریال گارانتی در کادر زیر از وضعیت گارانتی محصول و یا با انتخاب گزینه اصالت کالا و
                وارد کردن شماره سریال خود دستگاه از اصالت دستگاه مطلع شوید.
              </p>
              <div class="switchBox">
                <div class="switch">
                  <button
                    type="button"
                    class=""
                    :class="inquiryType === 'guaranteeSerial' && 'active'"
                    @click="inquiryType = 'guaranteeSerial'"
                  >
                    سریال گارانتی
                  </button>
                  <button
                    type="button"
                    class=""
                    :class="inquiryType === 'orginality' && 'active'"
                    @click="inquiryType = 'orginality'"
                  >
                    اصالت کالا
                  </button>
                </div>
              </div>
              <div class="checkSerial">
                <form @submit.prevent="checkSerial">
                  <input v-model="serial" type="text" :placeholder="serialInputPlaceholder" />
                  <el-button
                    native-type="submit"
                    class="custom-el-button"
                    :loading="checkingSerial"
                    :disabled="!Boolean(serial.length)"
                    >{{ inquiryBtnTxt }}</el-button
                  >
                </form>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-7 order-0 order-lg-1">
            <div class="boxBg description">
              <h1>خدمات گارانتی آسان سرویس</h1>
              <p>
                آسان سرویس یکی از بزرگترین و فعالترین ارائه دهنده خدمات پس از فروش محصولات الکترونیکی به مدد شبکه گسترده
                و منسجم خدمات پس از فروش خود توانسته پاسخگوی مشتریان فهیم و گرانقدر باشد.
              </p>
              <br />
              <p>کاربر گرامی جهت استفاده از خدمات گارانتی محصول مورد نظر بر روی دکمه ثبت گارانتی کلیک کنید.</p>
              <p>
                همچنین میتوانید جهت راهنمایی مراحل ثبت گارانتی بر روی دکمه راهنمای ثبت گارانتی کلیک کرده و محتوای
                ویدیویی آن را مشاهده فرمایید.
              </p>

              <div class="btns">
                <nuxt-link
                  v-if="help && help.helpId"
                  :to="{ name: 'learning-post+', params: { post: help.helpId.title } }"
                  class="btn btn-primary"
                  >راهنمای ثبت گارانتی</nuxt-link
                >
                <nuxt-link :to="{ name: 'account-post' }" class="btn btn-primary">ثبت گارانتی</nuxt-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="p-3"  style="background-color: white">
      <div >
        <el-carousel :interval="400000" type="card" height="400px">
          <el-carousel-item v-for="item in 6" :key="item">
           
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  async asyncData({ $axios, error }) {
    try {
      const help = await $axios.get('/api/public/help?front=true')
      return {
        help: help.data
      }
    } catch (e) {
      error({ status: 500, message: 'There is a problem here' })
    }
  },
  data() {
    return {
      serial: '',
      help: null,
      inquiryType: 'guaranteeSerial',
      checkingSerial: false
    }
  },
  head() {
    return {
      title: 'آسان سرویس | استعلام گارانتی'
    }
  },
  computed: {
    serialInputPlaceholder() {
      if (this.inquiryType === 'guaranteeSerial') return 'شماره سریال گارانتی را وارد کنید'
      else return 'شماره سریال دستگاه را وارد کنید'
    },
    inquiryBtnTxt() {
      if (this.inquiryType === 'guaranteeSerial') return 'بررسی گارانتی'
      else return 'بررسی اصالت'
    }
  },
  methods: {
    checkSerial() {
      // validation
      if (this.checkingSerial) {
        return this.$message({
          type: 'warning',
          message: 'لطفا منتظر بمانید'
        })
      }
      if (!this.serial.length) {
        return this.$message({
          type: 'warning',
          message: 'ابتدا شماره سریال را وارد کنید'
        })
      }

      this.checkingSerial = true
      const data = {
        serial: this.serial,
        type: this.inquiryType
      }
      const loading = this.$loading({
        lock: true,
        text: 'در حال بررسی شماره سریال',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      let responseTitle
      if (this.inquiryType === 'guaranteeSerial') responseTitle = 'بررسی شماره سریال گارانتی'
      else responseTitle = 'بررسی اصالت کالا'

      this.$axios
        .post(`/api/public/checkSerial`, data)
        .then(res => {
          this.checkingSerial = false
          loading.close()
          this.$alert(res.data.message, responseTitle, {
            confirmButtonText: 'بستن',
            type: 'success'
          })
        })
        .catch(err => {
          this.checkingSerial = false
          loading.close()
          this.$alert(err.response.data.message, responseTitle, {
            confirmButtonText: 'بستن',
            type: 'error'
          })
        })
    }
  }
}
</script>

<style scoped>

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>