ShowEasyFrontEnd/FrontEnd/components/dropdown/changeCurrency.vue

<template>
  <div
    class="changeCurrency tw-flex tw-items-center tw-border-solid tw-border-[1px] tw-border-neutrals-200 tw-bg-white tw-text-neutrals-800 tw-rounded-[16px] tw-mb-[16px]">
    <select v-model="price" @change="inputVal"
      class="customselect t14 tw-font-normal tw-w-full tw-my-[12px] tw-mx-[25px] md:t16 focus:tw-outline-none">
      <!-- <option value="USD">
        <div class="option">USD</div>
        <div class="">{{$t('U.S. Dollar')}}</div>
      </option> -->
      <option value="NTD">
        <div class="option">NTD</div>
        <div class="">{{$t('New Taiwan Dollar')}}</div>
      </option>
      <!-- 
      <option class="tw-mb-[30px]">
        <div class="t14 tw-font-normal">JPY</div>
        <div class="t12 tw-font-normal">Japanese Yen</div>
      </option>
      <option class="tw-mb-[30px]">
        <div class="t12 tw-font-normal">EUR</div>
        <div class="t12 tw-font-normal">Euro</div>
      </option> -->
    </select>

    <img src="@/assets/svg/down-arrow.svg" class="tw-mr-[20px]" alt="" />
  </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 = "NTD";
            this.$store.dispatch("updateCurrency", "NTD");
          } 
          else {
            this.price = "USD";
            this.$store.dispatch("updateCurrency", "USD");
          }
        }
      }
    },
    inputVal() {
      localStorage.setItem("currency", this.price);
      this.$store.dispatch("updateCurrency", this.price);
      this.show = false;
    },
  },
};
</script>
<style lang="scss" scoped>

</style>