/home/henzagold/oldsite/components/ Current File: /home/henzagold/oldsite/components/Popup.vue
<template>
  <div :style="{display}" class="modal quick-view-modal popup" :class="m?'fade-in show':'fade'" role="dialog">
    <div class="vs-sidebar--background" @click="toggle(false)"></div>
    <div class="modal-dialog modal-lg modal-dialog-centered md:w-[50%] " role="document" style="height: 80vh;max-height: 80vh;display: flex;align-items: center;justify-content: center;" >
      <div class="modal-content relative overflow-hidden" style="z-index: 20001;background: url('./img/popup/1.jpg');background-size: cover">
        <div class="modal-body ">
          <div v-if="closable" class="close-btn close-btn" @click="toggle(false)">
            <span></span>
            <span></span>
          </div>
          <div class="text-center text-2xl mt-28 text-white">
            {{randomText}}
          </div>
          <div class="mt-5 flex flex-col gap-5 items-center">
            <div class="lg:w-2/5 w-full">
              <input v-model="phone" type="tel" class="form-control text-left" dir="ltr" placeholder="09*********" @keyup="validatePhone" />
              <span class="text-danger text-lg block" v-if="invalidPhone && !invalidEmpty">شماره وارد شده نامعتبر است</span>
              <span class="text-danger text-lg block" v-if="invalidEmpty">شماره همراه خود را وارد نمایید</span>
            </div>
            <button class="btn-custom primary" @click="submitNewsletters">عضویت در خبر نامه</button>
          </div>
        </div>
        <div class="popup-blur" />
      </div>

    </div>

  </div>
</template>

<script>
import axios from "@/plugins/axios";

export default {
  props:{
    maxWidth:{
      required: false,
      type: String
    },
    closable:{
      required: false,
      type: Boolean,
      default: true
    },
    model:{
      type:Boolean,
      default:false
    }
  },
  model: {
    prop: 'model',
    event: 'change'
  },
  data(){
    return{
      display: "none",
      invalidEmpty:false,
      invalidPhone:false,
      phone:''
    }
  },
  watch:{
    model(value){
      this.display = (this.model)?"block":"none"
      const html = document.getElementsByTagName('html')
      if (html) html[0].classList.toggle('overflow-hidden')
      if (!value){
        this.$emit('close')
      }
    }
  },
  computed: {
    randomText(){
      return  this.$store.state.header_texts[0]
    },
    m: {
      get: function() {
        return this.model
      },
      set: function(value) {

        this.$emit('change', value)
      }
    }
  },
  methods:{
    validatePhone(){
      const reg = new RegExp('^[0-9]+$');
      this.invalidEmpty = this.phone == '';
      this.invalidPhone = (this.phone.length < 11 || this.phone.length > 11) || (this.phone.length==11 && !reg.test(this.phone))//&& reg.test(this.phone);
      return !this.invalidPhone && !this.invalidEmpty
      //this.invalidPhone =
    },
    toggle(value){
      this.$emit('change', value)
      // console.log(value)
    },
    async submitNewsletters(){


      /*this.$vs.notify({
        title: '',
        text: 'محصول به سبد خرید اضافه شد',
        color: 'var(--secondary-color)',
        position: 'bottom-left'
      });*/
      if(this.validatePhone()){
        let message=''
        try {
          const data=await axios.post('/get/fashion',{name:'',mobile:this.phone})
          message='عضویت شما در خبرنامه با موفقیت انجام شد'
        }catch (e){
          //console.log(e.response.data)
           message=e.response.data;
          //error message
        }finally {
          this.$emit('change', false)
          this.$vs.notify({
            color: 'var(--secondary-color)',
            text: message,
            position: 'bottom-left'
          })
        }
      }
    }
  }
}
</script>

<style>
  .popup .popup-blur{
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, rgba(0, 0,0, 0) , rgba(25,48,86,0.5) 100%);
      position: absolute;
      bottom: 0;
      z-index: -1;
  }
  /*background: linear-gradient(180deg, rgba(26, 26, 26, 0) -12.37%, #1C2D56 87.63%);*/
</style>