mohadese namavar
82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<template>
|
|
<div class="newsletters">
|
|
<h2>{{ $t("newslettersDesc") }}</h2>
|
|
<form>
|
|
<div>
|
|
<i class="isax isax-sms" />
|
|
<span>|</span>
|
|
<input v-model="email" :class="{ '!ltr': email }" :placeholder="$t('emailAddress')" />
|
|
</div>
|
|
<Button :label="$t('submit')" :loading="loading" @click="submit()" />
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { toast, t } = inject('service')
|
|
const loading = ref(false)
|
|
const email = ref()
|
|
|
|
const submit = async () => {
|
|
if (email.value.includes('@')) {
|
|
loading.value = true;
|
|
const { status, error } = await useFetch('/api/news', { method: 'post', body: { email: email.value } })
|
|
loading.value = false;
|
|
email.value = '';
|
|
|
|
if (status.value == 'success')
|
|
toast.add({
|
|
life: 3000,
|
|
severity: 'success',
|
|
summary: t('success'),
|
|
detail: t('submitedSuccessfully')
|
|
})
|
|
else
|
|
toast.add({
|
|
life: 3000,
|
|
severity: 'error',
|
|
summary: t('error'),
|
|
detail: error.value
|
|
})
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
footer .newsletters {
|
|
@apply bg-zinc-100 rounded-xl border-2 border-neutral-200;
|
|
@apply flex flex-col items-center justify-between p-3 font-vazir;
|
|
@apply w-full h-auto gap-4 py-4;
|
|
@apply lg:w-[57.7rem] lg:h-[4.5rem] lg:flex-row;
|
|
|
|
h2 {
|
|
@apply text-zinc-800 text-lg font-medium leading-[1.9rem] mr-3;
|
|
}
|
|
|
|
form {
|
|
@apply flex gap-2;
|
|
|
|
div {
|
|
@apply w-[16.9rem] md:w-[21.5rem] h-12 bg-neutral-200 rounded-lg flex gap-3 items-center p-3;
|
|
|
|
i {
|
|
@apply text-2xl;
|
|
}
|
|
|
|
input {
|
|
@apply h-12 bg-transparent w-full rtl text-neutral-600 font-medium outline-none;
|
|
|
|
&:placeholder {
|
|
@apply text-neutral-600;
|
|
}
|
|
}
|
|
}
|
|
|
|
button {
|
|
@apply w-[4.5rem] h-12 bg-[#47B556] rounded-md text-white text-base font-medium #{!important};
|
|
}
|
|
}
|
|
}
|
|
</style>
|