mohadese namavar
103 lines
2.7 KiB
Vue
103 lines
2.7 KiB
Vue
<template>
|
|
<div class="product-share">
|
|
<div>
|
|
<div>
|
|
<h2>{{ $t('share') }}</h2>
|
|
<Button v-bind="btns.close.props" @click="dialog.close()" />
|
|
</div>
|
|
<p>{{ $t('shareProductWhitFriends') }}</p>
|
|
</div>
|
|
<div>
|
|
<template v-for="(btn, key) in btns.shares" :key="key">
|
|
<Button v-bind="btn.props" @click="events[key]()" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { meta } = useRoute()
|
|
const { btns } = meta.init
|
|
const { toast, t } = inject('service')
|
|
const dialog = inject('dialogRef')
|
|
|
|
const events = reactive({
|
|
copyLink: () => {
|
|
navigator.clipboard.writeText(location.href).then(function () {
|
|
toast.add({ life: 3000, summary: t('success'), detail: t('copied'), severity: 'success' })
|
|
})
|
|
dialog.value.close()
|
|
},
|
|
telegram: () => {
|
|
window.open('tg://msg_url?url=' + location.href, '_blank')
|
|
dialog.value.close()
|
|
},
|
|
whatsapp: () => {
|
|
window.open('whatsapp://send?text=' + location.href, '_blank')
|
|
dialog.value.close()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product-share {
|
|
@apply w-full lg:w-[40.1rem] lg:h-[19.9rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col justify-between;
|
|
|
|
&>div:nth-of-type(1) {
|
|
@apply flex flex-col gap-1.5 lg:gap-2 p-6 lg:px-10 lg:pb-2 lg:pt-8;
|
|
|
|
&>div {
|
|
@apply flex justify-between items-center;
|
|
|
|
h2 {
|
|
@apply text-zinc-800 text-sm lg:text-xl font-bold font-vazir;
|
|
}
|
|
|
|
button {
|
|
@apply -mx-4 -my-3;
|
|
|
|
.p-button-icon {
|
|
@apply text-[1.4em] lg:text-3xl text-[#B2B2B2];
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
@apply text-[#7F7F7F] text-[0.7em] lg:text-lg font-normal font-vazir;
|
|
}
|
|
}
|
|
|
|
&>div:nth-of-type(2) {
|
|
@apply flex flex-wrap gap-x-3 gap-y-[1.1rem] lg:gap-y-6 px-6 pb-5 pt-3 lg:p-10;
|
|
|
|
button {
|
|
@apply grow justify-center h-12 lg:h-14;
|
|
|
|
.p-button-icon {
|
|
@apply text-xl lg:text-[1.4em] ml-3;
|
|
}
|
|
|
|
.p-button-label {
|
|
@apply text-xs lg:text-xl font-medium font-iran-sans grow-0;
|
|
}
|
|
}
|
|
|
|
button:nth-of-type(1) {
|
|
@apply w-full border-2 border-[#B2B2B2] text-[#333333];
|
|
|
|
.p-button-icon {
|
|
@apply text-xl lg:text-2xl;
|
|
}
|
|
}
|
|
|
|
button:nth-of-type(2) {
|
|
@apply bg-[#43E97B] hover:bg-[#467ca7] border-[#43E97B];
|
|
}
|
|
|
|
button:nth-of-type(3) {
|
|
@apply bg-[#34AD39] hover:bg-[#30a034] border-[#34AD39];
|
|
}
|
|
}
|
|
}
|
|
</style>
|