ShowEasyFrontEnd/FrontEnd/components/dropdown/changeCurrencyWeb.vue

<template>
  <div
    :class="[
      'changeCurrency tw-relative tw-justify-center tw-items-center',
      hideSwitchPrice ? 'tw-hidden' : 'tw-flex',
    ]"
  >
    <div
      :class="[
        'tw-flex tw-items-center tw-mx-[12px] tw-cursor-pointer tw-py-[8px] tw-rounded-[4px]',
        show ? 'show' : '',
      ]"
      @click="show = !show"
      v-click-outside="clickOutSide"
    >
      <div class="tw-body-3 tw-mr-[15px]">
        {{ price }}
      </div>
      <img src="@/assets/svg/down-arrow.svg" />
    </div>
    <transition name="fade">
      <div
        v-show="show"
        class="tw-rounded-[10px] tw-bg-white tw-px-[12px] tw-py-[8px] tw-absolute tw-top-[40px] tw-left-0 tw-w-max tw-z-10"
      >
        <button
          class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[25px] tw-px-[12px] tw-py-[11px] tw-w-full tw-bg-white hover:tw-bg-primary-pale hover:tw-text-primary-1 hover:tw-rounded-[10px]"
          @click="Currencystatus('USD')"
        >
          <div class="tw-body-4 tw-font-bold" value="USD">USD</div>
          <div class="tw-body-4 tw-text-left">{{ $t("U.S. Dollar") }}</div>
        </button>
        <button
          class="tw-grid tw-grid-cols-[20px_auto] tw-gap-[25px] tw-px-[12px] tw-py-[11px] tw-w-full tw-bg-white hover:tw-bg-primary-pale hover:tw-text-primary-1 hover:tw-rounded-[10px]"
          @click="Currencystatus('TWD')"
        >
          <div class="tw-body-4 tw-font-bold tw-mr-[20px]" value="TWD">TWD</div>
          <div class="tw-body-4 tw-text-left">
            {{ $t("New Taiwan Dollar") }}
          </div>
        </button>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      price: "",
      changeCurrency: false,
    };
  },

  mounted() {
    this.change();
  },
  computed: {
    currentLang() {
      return this.$i18n.locale;
    },
    hideSwitchPrice() {
      let vm = this;
      if (vm.$route.matched.length > 0) {
        if (vm.$route.matched[0].path == "/service/checkout/:id?") {
          vm.$store.dispatch("hideSwitchPrice", true);
        } else {
          vm.$store.dispatch("hideSwitchPrice", false);
        }
      }
      return this.$store.getters.getHidePrice;
    },
  },
  watch: {
    currentLang: {
      handler: function () {
        this.change();
      }
    }
  },
  methods: {
    change() {
      if (process.browser) {
        let storageprice = localStorage.getItem("currency");
        if (storageprice) {
          this.price = storageprice;
          this.$store.dispatch("updateCurrency", storageprice);
        } else {
          if (this.$i18n.locale == 'zh-tw') {
            this.price = "TWD";
            this.$store.dispatch("updateCurrency", "TWD");
          } else {
            this.price = "USD";
            this.$store.dispatch("updateCurrency", "USD");
          }
        }
      }
    },
    Currencystatus(data) {
      this.price = data;
      localStorage.setItem("currency", data);
      this.$store.dispatch("updateCurrency", data);
      this.show = false;
    },
    clickOutSide() {
      this.show = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.changeCurrency > div {
  border-radius: 4px;

  &:hover {
    &::before {
      opacity: 0.08;
      // background-color: rgba(238, 149, 70, 0.6);
      bottom: 0;
      content: " ";
      display: block;
      left: 0;
      pointer-events: none;
      position: absolute;
      right: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
}

.changeCurrency > div.show {
  &::before {
    opacity: 0.24;
    background-color: rgba(238, 149, 70, 0.6);
    bottom: 0;
    content: " ";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
</style>