You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
3.7 KiB
150 lines
3.7 KiB
<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>
|