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 v-if="brands.length > 0" class="p-3" style="background-color: white;  position: relative;
    z-index: 999;">
      <div>
        <el-carousel :interval="5000" type="card" height="300px">
          <el-carousel-item style="display: flex; justify-content: center; align-items: center;" v-for="item, i in brands" :key="i">
           <a :href="item.link" class="m-2 p-2" style="  width: 100%;   height: 100%;">
          
            <div class="row box-shape">
             
              <div class=" col-lg-4 col-sm-12" style="display: flex; justify-content: center; align-items: center;">
  <!-- <img :src="'https://www.asan-service.com/uploads/images/brands/' + item.image"> -->
              <img width="188" 
                :src="config.apiAsanMarket + item.logo"
               
              />
              </div>
            
              <div class="col-lg-8 col-sm-12 desc-box p-3">
                <h4 class="mb-4">
                  {{ item.title }}
                </h4>
                <p>
                  {{ item.description }}
                </p>

              </div>
            </div>
           
           </a>
          </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,
      brands:[],
    }
  },
  head() {
    return {
      title: 'آسان سرویس | استعلام گارانتی'
    }
  },
  computed: {
    serialInputPlaceholder() {
      if (this.inquiryType === 'guaranteeSerial') return 'شماره سریال گارانتی را وارد کنید'
      else return 'شماره سریال دستگاه را وارد کنید'
    },
    inquiryBtnTxt() {
      if (this.inquiryType === 'guaranteeSerial') return 'بررسی گارانتی'
      else return 'بررسی اصالت'
    },
    config() {
      return this.$config
    }
  },
  mounted(){
      this.$axios.get(`https://api-asanmarket.iran.liara.run/brands`).then((res)=>{
        this.brands = res.data

      })
  },
  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>
.rounded{
  border-radius: 5px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf00;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce600;
}

.box-shape{
  background-color: #f1f1f1;
  border: 1px solid #c4c4c4;
  height: 100%;
  border-radius: 5px;
}
.desc-box{
  display: flex;
    flex-direction: column;
    justify-content: center;
}
</style>