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 v-if="!open" class="boxBg inquiry">
              <h2>نوع محصول را انتخاب کنید:</h2>
              <div class="brandsList">
                <CRow>
                  <CCol col="12">
                    <p>
                      ضمن خوش آمدگویی شما به مجموعه آسان سرویس چنانچه محصول خریداری شده شما دارای سریال گارانتی میباشد
                      میتوانید با وارد کردن سریال گارانتی در کادر زیر از وضعیت گارانتی محصول و یا با انتخاب گزینه اصالت
                      کالا و وارد کردن شماره سریال خود دستگاه از اصالت دستگاه مطلع شوید.
                    </p>
                  </CCol>
                  <CCol lg="6" sm="12">
                    <div class="brand" :class="g === 1 && 'selected'">
                      <button @click="openModal(1)">
                        <i class="fas fa-phone-laptop"></i>
                        <span>لوازم جانبی کامپیوتر ، موبایل و محصولات حافظه</span>
                      </button>
                    </div>
                  </CCol>
                  <CCol lg="6" sm="12">
                    <div class="brand" :class="g === 2 && 'selected'">
                      <button @click="openModal(1)">
                        <i class="fas fa-photo-video"></i>
                        <span>لوازم صوتی و تصویری خودرو</span>
                      </button>
                    </div>
                  </CCol>
                </CRow>
              </div>
            </div>
            <div v-if="open" class="boxBg inquiry">
              <h2>استعلام گارانتی و اصالت کالا</h2>
              <span v-if="g === 1">لوازم جانبی کامپیوتر ، موبایل و محصولات حافظه</span>
              <span v-else>لوازم صوتی و تصویری خودرو</span>
              <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="$route.query?.brand == 2" class="p-3" style="background-color: white; position: relative; z-index: 999">
      <div>
        <el-carousel :interval="5000" type="card" height="250px">
          <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 width="188" :src="'/uploads/images/brands/' + 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: [],
      g: 1,
      open: false
    }
  },
  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(`/api/public/brand`).then(res => {
      this.brands = res.data
    })
  },
  methods: {
    openModal(g) {
      this.g = g
      this.open = true
    },
    closeModal() {
      this.open = false
    },
    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,
        g: this.g
      }
      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 lang="scss" scoped>
.brandsList {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;

  .brand {
    flex-basis: 50%;
    max-width: 180px;
    padding: 10px;
    text-align: center;

    &.selected {
      button {
        background: #065495;

        img {
          opacity: 0;

          &.alt {
            opacity: 1;
          }
        }

        i,
        span {
          color: #fff;
        }
      }
    }

    button {
      width: 100%;
      height: 100%;
      display: inline-block;
      overflow: hidden;
      border: 1px solid #065495;
      cursor: pointer;
      border-radius: 10px;
      background: transparent;
      position: relative;
      padding: 5px;

      &:hover {
        background: #065495;

        img {
          opacity: 0;

          &.alt {
            opacity: 1;
          }
        }
        i,
        span {
          color: #fff;
        }
      }

      img {
        display: block;
        width: 100%;

        &.alt {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          opacity: 0;
        }
      }

      i {
        display: block;
        font-size: 50px;
        margin: 10px 0;
        color: #065495;
      }
      span {
        color: #065495;
        font-family: 'iranYekanB';
      }
    }
  }
}
.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>