ShowEasyFrontEnd/FrontEnd/components/home/CookieUnderModal.vue

<template>
  <div
    class="cookie-bottom-modal d-flex justify-center"
    v-if="isCookieHasBeenClicked"
    style="z-index: 999"
  >
    <div class="computer hidden-sm-and-down">
      <v-card
        flat
        max-width="1306"
        min-height="80"
        class="border-radius-20 py-5 px-8 d-flex justify-space-between mx-5"
        style="background-color: rgba(0, 0, 0, 0.75)"
      >
        <v-card
          flat
          class="d-flex flex-column tw-mr-[10px]"
          color="transparent"
        >
          <v-card
            flat
            color="transparent"
            class="white--text px-3"
            style="font-size: 14px; letter-spacing: 0.02em"
          >
            {{
              $t(
                "We use cookies to ensure that we give you the best experience on our website. We also use cookies to ensure we show you advertising that is relevant to you."
              )
            }}
          </v-card>
          <v-card
            flat
            color="transparent"
            class="primary--text px-3 tw-body-4"
            style="text-decoration: underline"
            ><nuxt-link :to="localePath('/cookiePolicy')">
              {{ $t("Learn More") }}</nuxt-link
            ></v-card
          >
        </v-card>
        <v-btn
          class="remove-upper primary white--text border-radius-16"
          width="140"
          height="40"
          @click="closeCookie()"
        >
          {{ $t("Got it") }}
        </v-btn>
      </v-card>
    </div>

    <div class="tablet d-none d-sm-flex d-md-none">
      <v-card
        flat
        max-width="708"
        min-height="171"
        class="border-radius-20 py-5 px-7 mx-5 d-flex flex-column justify-space-between"
        style="background-color: rgba(0, 0, 0, 0.75)"
      >
        <v-card flat class="d-flex flex-column" color="transparent">
          <v-card
            flat
            color="transparent"
            class="white--text"
            style="font-size: 14px; letter-spacing: 0.02em"
          >
            {{
              $t(
                "We use cookies to ensure that we give you the best experience on our website. We also use cookies to ensure we show you advertising that is relevant to you."
              )
            }}
          </v-card>
          <v-card
            flat
            color="transparent"
            class="primary--text tw-body-4"
            style="text-decoration: underline"
            ><nuxt-link :to="localePath('/cookiePolicy')">
              {{ $t("Learn More") }}</nuxt-link
            ></v-card
          >
        </v-card>
        <v-btn
          class="remove-upper primary white--text border-radius-16"
          max-width="648"
          height="40"
          @click="closeCookie()"
        >
          {{ $t("Got it") }}
        </v-btn>
      </v-card>
    </div>

    <div class="phone hidden-sm-and-up">
      <v-card
        flat
        max-width="384"
        min-height="164"
        class="border-radius-20 py-5 px-7 mx-5 d-flex flex-column justify-space-between"
        style="background-color: rgba(0, 0, 0, 0.75)"
      >
        <v-card flat class="d-flex flex-column" color="transparent">
          <v-card
            flat
            color="transparent"
            class="white--text"
            style="font-size: 14px; letter-spacing: 0.02em; line-height: 16px"
          >
            {{
              $t(
                "We use cookies to ensure that we give you the best experience on our website. We also use cookies to ensure we show you advertising that is relevant to you."
              )
            }}
          </v-card>
          <v-card
            flat
            color="transparent"
            class="primary--text tw-body-4 tw-mb-[20px]"
            style="text-decoration: underline"
            ><nuxt-link :to="localePath('/cookiePolicy')">
              {{ $t("Learn More") }}</nuxt-link
            ></v-card
          >
        </v-card>
        <v-btn
          class="remove-upper primary white--text border-radius-16"
          max-width="344"
          height="40"
          @click="closeCookie()"
        >
          {{ $t("Got it") }}
        </v-btn>
      </v-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      privacyPolicy: true,
      isCookieHasBeenClicked: true,
    };
  },
  created(){
    //this.$cookies.set("storeCache",JSON.stringify(true),1);   //一開始先設cookie為顯示
    if(process.client){   //若是在client端
      let storeCache = this.$cookies.get("storeCache");   //取storeCache(false) 有顯示
      if(storeCache == undefined){
        this.isCookieHasBeenClicked = true;
      }
      if(storeCache == true){
        this.isCookieHasBeenClicked = false;
      }else{
        this.isCookieHasBeenClicked = true;
      }
    // if(storeCache == undefined){   //
    //   this.$cookies.set("storeCache",JSON.stringify(true),1);
        
    //   }else if(storeCache == false){
    //     this.$cookies.set("storeCache",JSON.stringify(true),1);

    //   }else{  
    //     this.isCookieHasBeenClicked = JSON.parse(storeCache);
    //   }

      // if(storeCache != undefined){
      //   this.isCookieHasBeenClicked = JSON.parse(storeCache);
      // }
    }
  },
  watch: {
    isCookieHasBeenClicked: {
      handler: function () {
        if(this.isCookieHasBeenClicked == false){
          this.$cookies.set("storeCache",JSON.stringify(true), 1);
        }
      },
    },
  },
  methods:{
    closeCookie(){
      console.log(process.client ? true : false);
      if(process.client){   //在client端的時候
        this.isCookieHasBeenClicked = false;
      }
    }
  }
};
</script>

<style>
.cookie-bottom-modal {
  position: fixed;
  bottom: 40px;
  width: 100%;
}
</style>