yakovenko_arina/your-gold
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

pre registration

Browse Source
This commit is contained in:
Arina Yakovenko
2025-07-04 16:01:44 +02:00
parent af0a3df068
commit a2db817133
8 changed files with 511 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
components/HeaderBlock.vue
View File

@ -4,37 +4,25 @@
<div class="w-full border-b border-border">
<UiContainer class="relative">
<div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
<ul
class="flex items-center justify-between gap-5 whitespace-nowrap w-full"
>
<li
v-for="(item, index) in menuStore.menu"
:key="item.id"
:class="[
'hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter',
route.params.id == item.id.toString()
? 'text-accent-green-light dark:text-accent-green-dark font-bold underline'
: false,
]"
@click="menuStore.navigateToItem(item)"
>
<ul class="flex items-center justify-between gap-5 whitespace-nowrap w-full">
<li v-for="(item, index) in menuStore.menu" :key="item.id" :class="[
'hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter',
route.params.id == item.id.toString()
? 'text-accent-green-light dark:text-accent-green-dark font-bold underline'
: false,
]" @click="menuStore.navigateToItem(item)">
0{{ index + 1 }} <br>
{{ item.front_menu_lang[0].name }}
</li>
</ul>
<ClientOnly v-if="!colorMode?.forced">
<img
class="cursor-pointer"
:src="isDark ? '/logo-dark.svg' : '/logo.svg'"
alt="logo"
@click="menuStore.navigateToItem()"
>
<img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
@click="menuStore.navigateToItem()">
</ClientOnly>
<div class="w-full flex items-center justify-between">
<div class="flex items-center gap-[30px]">
<div>
<i v-if="!userStore.isLogged"
class="uil uil-user text-[31px] cursor-pointer"
<i v-if="!userStore.isLogged" class="uil uil-user text-[31px] cursor-pointer"
@click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"></i>
<div v-else class="py-[6px] px-3 border border-block rounded-sm">
{{ userStore.user }}
@ -47,15 +35,12 @@
<CountryCurrencySelector />
</div>
<ThemeSwitcher />
<button
:class="[
'cursor-pointer transition-all text-inter whitespace-nowrap',
route.params.id == '5'
? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2'
: 'hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3',
]"
@click="menuStore.navigateToShop"
>
<button :class="[
'cursor-pointer transition-all text-inter whitespace-nowrap',
route.params.id == '5'
? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2'
: 'hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3',
]" @click="menuStore.navigateToShop">
{{ $t("eshop") }}
</button>
</div>
@ -64,35 +49,22 @@
</div>
<!-- md -->
<div
class="hidden w-full md:flex md:flex-col xl:hidden items-center justify-center"
>
<div class="hidden w-full md:flex md:flex-col xl:hidden items-center justify-center">
<div class="w-full border-border border-b">
<UiContainer class="h-[116px] flex items-center justify-between">
<ClientOnly v-if="!colorMode?.forced">
<img
class="cursor-pointer"
:src="isDark ? '/logo-dark.svg' : '/logo.svg'"
alt="logo"
@click="menuStore.navigateToItem()"
>
<img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
@click="menuStore.navigateToItem()">
</ClientOnly>
<div class="flex items-center gap-6">
<div class="flex items-center gap-[30px]">
<div>
<i
v-if="!userStore.isLogged"
class="uil uil-user text-[31px] cursor-pointer"
@click="
menuStore.navigateToItem(
menuStore.menuItems?.find((item) => item.id === 11),
)
"
/>
<div
v-else
class="py-[6px] px-3 border border-block rounded-sm"
>
<i v-if="!userStore.isLogged" class="uil uil-user text-[31px] cursor-pointer" @click="
menuStore.navigateToItem(
menuStore.menuItems?.find((item) => item.id === 11),
)
" />
<div v-else class="py-[6px] px-3 border border-block rounded-sm">
{{ userStore.user }}
</div>
</div>
@ -103,54 +75,33 @@
<CountryCurrencySelector />
</div>
<ThemeSwitcher />
<i
variant="subtle"
block
class="uil uil-apps text-[33px] cursor-pointer"
@click="open = !open"
/>
<i variant="subtle" block class="uil uil-apps text-[33px] cursor-pointer" @click="open = !open" />
</div>
</UiContainer>
</div>
<UCollapsible
v-model:open="open"
:ui="{ content: 'w-full' }"
class="w-full"
>
<UCollapsible v-model:open="open" :ui="{ content: 'w-full' }" class="w-full">
<template #content>
<div class="w-full border-border border-b pt-6 pb-8">
<UiContainer class="flex flex-col gap-[30px]">
<div
v-for="(item, index) in menuStore.menu"
:key="index"
:class="[
'flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer',
route.params.slug === item.front_menu_lang[0].link_rewrite
&& 'text-accent-green-light dark:text-accent-green-dark font-bold underline',
]"
@click="
() => {
menuStore.navigateToItem(item);
open = false;
}
"
>
<div v-for="(item, index) in menuStore.menu" :key="index" :class="[
'flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer',
route.params.slug === item.front_menu_lang[0].link_rewrite
&& 'text-accent-green-light dark:text-accent-green-dark font-bold underline',
]" @click="
() => {
menuStore.navigateToItem(item);
open = false;
}
">
<div class="leading-[70%] text-inter">
<span class="mr-4">0{{ index + 1 }}</span>
{{ item.front_menu_lang[0].name }}
</div>
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
<svg
width="20"
height="20"
viewBox="0 0 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
fill="currentColor"
/>
fill="currentColor" />
</svg>
</div>
</UiContainer>
@ -160,88 +111,54 @@
</div>
<!-- sm -->
<div
class="hidden w-full items-center justify-between sm:flex sm:flex-col md:hidden"
>
<div class="hidden w-full items-center justify-between sm:flex sm:flex-col md:hidden">
<div class="w-full border-border border-b">
<UiContainer class="h-[84px] flex items-center justify-between">
<ClientOnly v-if="!colorMode?.forced">
<img
class="cursor-pointer"
:src="isDark ? '/logo-dark.svg' : '/logo.svg'"
alt="logo"
@click="menuStore.navigateToItem()"
>
<img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
@click="menuStore.navigateToItem()">
</ClientOnly>
<div class="flex items-center gap-6">
<div class="flex items-center gap-[30px]">
<div>
<i
v-if="!userStore.isLogged"
class="uil uil-user text-[31px] cursor-pointer"
@click="
menuStore.navigateToItem(
menuStore.menuItems?.find((item) => item.id === 11),
)
"
/>
<div
v-else
class="py-[6px] px-3 border border-block rounded-sm"
>
<i v-if="!userStore.isLogged" class="uil uil-user text-[31px] cursor-pointer" @click="
menuStore.navigateToItem(
menuStore.menuItems?.find((item) => item.id === 11),
)
" />
<div v-else class="py-[6px] px-3 border border-block rounded-sm">
{{ userStore.user }}
</div>
</div>
<CartPopup />
</div>
<i
variant="subtle"
block
class="uil uil-apps text-[30px] cursor-pointer"
@click="open = !open"
/>
<i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open" />
</div>
</UiContainer>
</div>
<UCollapsible
v-model:open="open"
:ui="{ content: 'w-full' }"
class="w-full"
>
<UCollapsible v-model:open="open" :ui="{ content: 'w-full' }" class="w-full">
<template #content>
<div class="w-full border-border border-b pt-6 pb-8">
<UiContainer class="flex flex-col gap-[30px]">
<div
v-for="(item, index) in menuStore.menu"
:key="index"
:class="[
'flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer',
route.params.slug === item.front_menu_lang[0].link_rewrite
&& 'text-accent-green-light dark:text-accent-green-dark font-bold underline',
]"
@click="
() => {
menuStore.navigateToItem(item);
open = false;
}
"
>
<div v-for="(item, index) in menuStore.menu" :key="index" :class="[
'flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer',
route.params.slug === item.front_menu_lang[0].link_rewrite
&& 'text-accent-green-light dark:text-accent-green-dark font-bold underline',
]" @click="
() => {
menuStore.navigateToItem(item);
open = false;
}
">
<div class="leading-[70%] text-inter">
<span class="mr-4">0{{ index + 1 }}</span>
{{ item.front_menu_lang[0].name }}
</div>
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
<svg
width="20"
height="20"
viewBox="0 0 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
fill="currentColor"
/>
fill="currentColor" />
</svg>
</div>
<div class="flex items-center justify-between">
@ -273,74 +190,46 @@
<div class="w-full border-border border-b">
<UiContainer class="h-[84px] flex items-center justify-between">
<ClientOnly v-if="!colorMode?.forced">
<img
class="cursor-pointer"
:src="isDark ? '/logo-dark.svg' : '/logo.svg'"
alt="logo"
@click="menuStore.navigateToItem()"
>
<img class="cursor-pointer" :src="isDark ? '/logo-dark.svg' : '/logo.svg'" alt="logo"
@click="menuStore.navigateToItem()">
</ClientOnly>
<div class="flex items-center gap-6">
<div>
<i
class="uil uil-user text-[30px] cursor-pointer"
@click="
!userStore.isLogged
&& menuStore.navigateToItem(
menuStore.menuItems?.find((item) => item.id === 11),
)
"
/>
<i class="uil uil-user text-[30px] cursor-pointer" @click="
!userStore.isLogged
&& menuStore.navigateToItem(
menuStore.menuItems?.find((item) => item.id === 11),
)
" />
</div>
<CartPopup />
<i
variant="subtle"
block
class="uil uil-apps text-[30px] cursor-pointer"
@click="open = !open"
/>
<i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open" />
</div>
</UiContainer>
</div>
<UCollapsible
v-model:open="open"
:ui="{ content: 'w-full' }"
class="w-full"
>
<UCollapsible v-model:open="open" :ui="{ content: 'w-full' }" class="w-full">
<template #content>
<div class="w-full border-border border-b pt-6 pb-8">
<UiContainer class="flex flex-col gap-[30px]">
<div
v-for="(item, index) in menuStore.menu"
:key="index"
:class="[
'flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer',
route.params.slug === item.front_menu_lang[0].link_rewrite
&& 'text-accent-green-light dark:text-accent-green-dark font-bold underline',
]"
@click="
() => {
menuStore.navigateToItem(item);
open = false;
}
"
>
<div v-for="(item, index) in menuStore.menu" :key="index" :class="[
'flex items-center justify-between transition-all hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer',
route.params.slug === item.front_menu_lang[0].link_rewrite
&& 'text-accent-green-light dark:text-accent-green-dark font-bold underline',
]" @click="
() => {
menuStore.navigateToItem(item);
open = false;
}
">
<div class="leading-[70%] text-inter">
<span class="mr-4">0{{ index + 1 }}</span>
{{ item.front_menu_lang[0].name }}
</div>
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
<svg
width="20"
height="20"
viewBox="0 0 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
fill="currentColor"
/>
fill="currentColor" />
</svg>
</div>
<div class="flex items-center justify-between">

54
components/section/FooterBlock.vue
View File

@ -2,52 +2,26 @@
<div class="border-t border-border pt-[75px]">
<UiContainer class="flex flex-col gap-24">
<div
class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none xl:grid-flow-col auto-cols-max justify-between"
>
<div>
<div
v-for="(item, key) in contact"
:key="key"
class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]"
>
<h3 v-if="key == 'header'"
class="h4-uppercase-bold-inter"
>
class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none xl:grid-flow-col auto-cols-max justify-between">
<div class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">
<div v-for="(item, key) in contact" :key="key">
<h3 v-if="key == 'header'" class="h4-uppercase-bold-inter">
{{ item }}
</h3>
<div v-else
class="transition-all text-inter"
>
<div v-else class="transition-all text-inter">
{{ item }}
</div>
</div>
<div class="text-red-500">
arina - doadj tu icone i style
</div>
<a
href="/lei_certificate_aurrie.pdf"
target="_blank"
rel="noopener noreferrer"
>{{ $t("Footer.Lei") }}</a>
<a href="/lei_certificate_aurrie.pdf" target="_blank" rel="noopener noreferrer">{{ $t("Footer.Lei") }}</a>
</div>
<div
v-for="(section, index) in docs"
:key="index"
class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]"
>
<div v-for="(section, index) in docs" :key="index" class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">
<h3 class="h4-uppercase-bold-inter">
{{ section.translation }}
</h3>
<div v-for="(item, key) in section.data"
:key="key"
>
<div
class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter"
>
<a target="_blank"
:href="`/api/public/document/${item.name}`"
>{{
<div v-for="(item, key) in section.data" :key="key">
<div class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter">
<a target="_blank" :href="`/api/public/document/${item.name}`">{{
item.translation
}}</a>
</div>
@ -56,12 +30,8 @@
</div>
<ClientOnly v-if="!colorMode?.forced">
<img
class="cursor-pointer w-[70%] sm:w-[50%] xl:w-[30%]"
:src="isDark ? '/logo-footer-dark.svg' : '/logo-footer.svg'"
alt="logo"
@click="menuStore.navigateToItem()"
>
<img class="cursor-pointer w-[70%] sm:w-[50%] xl:w-[30%]"
:src="isDark ? '/logo-footer-dark.svg' : '/logo-footer.svg'" alt="logo" @click="menuStore.navigateToItem()">
</ClientOnly>
</UiContainer>
</div>

3
components/section/LoginMain.vue
View File

@ -46,7 +46,8 @@
<p>
{{ $t("no_account") }}
</p>
<nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getRegistrationMenu()?.id, slug: menuStore.getRegistrationMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
<nuxt-link
:to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getPreRegistrationMenu()?.id, slug: menuStore.getPreRegistrationMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
<p class="text-button cursor-pointer hover:text-button-hover">
{{ $t("sign_up_now") }}
</p>

2
components/section/MainHero.vue
View File

@ -19,7 +19,7 @@
{{ component.front_section_lang[0].data.title_second }}
</h3>
<div class="flex w-full items-start justify-center sm:justify-end">
<nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getRegistrationMenu()?.id, slug: menuStore.getRegistrationMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
<nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getPreRegistrationMenu()?.id, slug: menuStore.getPreRegistrationMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
<UiButtonArrow :arrow="true"
type="fill"
>

254
components/section/PreRegistrationMain.vue Normal file
View File

@ -0,0 +1,254 @@
<template>
<UiContainer class="flex py-[15px] xl:py-20 sm:py-0">
<div class="hidden xl:block rounded-2xl min-w-[40%] h-[830px]" :style="{
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}" />
<div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12">
<div class="space-25-55">
<div class="flex flex-wrap-reverse gap-y-4 justify-between">
<h2 class="h2-bold-bounded">
{{ $t("sign_up") }}
</h2>
<button
class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer"
@click="menuStore.navigateToItem()">
{{ $t("back_to_home") }}
</button>
</div>
<div class="space-y-[25px] sm:space-y-[30px]">
<p>{{ $t("current_information") }}</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-[30px]">
<CheckoutInput :id="1" v-model="user.data.name" :validation="nameValidation"
:validation-text="$t('enter_correct_data')" :placeholder="$t('first_name')">
{{ $t("first_name") }}
</CheckoutInput>
<CheckoutInput :id="1" v-model="user.data.surname" :validation="surnameValidation"
:validation-text="$t('enter_correct_data')" :placeholder="$t('last_name')">
{{ $t("last_name") }}
</CheckoutInput>
<CheckoutInput :id="1" v-model="user.data.email" :validation="emailValidation"
:validation-text="$t('enter_correct_data')" :placeholder="$t('email')">
{{ $t("email") }}
</CheckoutInput>
<div ref="dropdownRef" class="space-y-[15px]">
<p class="pl-6">
{{ $t("phone") }}
</p>
<div>
<div class="flex items-center border border-block rounded-lg">
<div
class="relative z-50 bg-inherit ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
<div class="px-[25px]" @click="dropCountry = !dropCountry">
<div
class="flex items-center gap-2 text-sm sm:text-xl uppercase text-text-light dark:text-text-dark">
<span :class="[dropCountry && 'rotate-180', 'transition-all']">
<i class="uil uil-angle-down text-2xl font-light cursor-pointer" /></span>
<p class="text-sm sm:text-xl">
{{ menuStore.selectedPhoneCountry.iso_code }}
</p>
</div>
</div>
<div v-if="dropCountry"
class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-[130px] sm:w-full border border-button py-[10px] px-[5px] overflow-hidden">
<div class="overflow-y-auto h-[200px] w-full">
<p v-for="item in menuStore.countries" :key="item.iso_code"
class="w-full truncate whitespace-nowrap overflow-hidden hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
:title="item.name" @click="
() => {
menuStore.selectedPhoneCountry = item;
dropCountry = false;
}
">
{{ item.name }}
</p>
</div>
</div>
</div>
<p class="text-sm sm:text-xl font-normal">
{{ menuStore.selectedPhoneCountry.call_prefix }}
</p>
<input id="phone" v-model="user.data.phone" :placeholder="$t('phone')" type="text"
class="text-sm sm:text-xl placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0">
</div>
<p v-if="!phoneValidation && phoneValidation != null" class="mt-2 text-xs text-red-600">
{{ $t('enter_correct_data') }}
</p>
</div>
</div>
<div class="space-y-[15px]">
<p class="pl-6">
{{ $t("account_type") }}
</p>
<USelect v-model="selectedType" :items="component.front_section_lang
&& component.front_section_lang[0].data.account_types
" value-key="name" :searchable="false" :ui="{
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 h-[50px] sm:h-[67px] w-full p-0',
trailing: 'hidden w-full',
viewport: 'ring-0 min-w-full',
content:
'bg-bg-light dark:bg-bg-dark ring-0 border border-button',
leading:
'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-0 w-full',
group: 'px-[5px] py-[10px]',
item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 min-w-full',
}">
<template #leading="{ modelValue }">
<div
class="flex items-center justify-between gap-2 uppercase text-sm sm:text-xl border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 w-full h-[50px] sm:h-[67px]">
<p class="truncate whitespace-nowrap">
{{
component.front_section_lang
&& component.front_section_lang[0].data.account_types.find(
(item) => item.name === modelValue,
)?.name
}}
</p>
<span>
<i class="uil uil-angle-down text-2xl font-light cursor-pointer" /></span>
</div>
</template>
<template #item="{ item }">
<div class="flex items-center gap-2 cursor-pointer min-w-full">
<p
class="truncate whitespace-nowrap text-sm sm:text-xl font-medium uppercase text-text-light dark:text-text-dark opacity-100">
{{ item.name }}
</p>
</div>
</template>
</USelect>
</div>
<div class="space-y-[15px]">
<p class="pl-6">
{{ $t("partner_code") }}
</p>
<input :placeholder="$t('placeholder_password')" type="text"
class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2">
</div>
</div>
</div>
</div>
<div class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full">
<UiButtonArrow type="fill" :arrow="true" @click="sendForm()">
{{
$t("sign_up")
}}
</UiButtonArrow>
</div>
<div class="mt-[25px] sm:mt-[30px] w-full flex justify-center gap-3">
<p class="cursor-pointer hover:underline transition-all">
{{ $t("is_account") }}
</p>
<nuxt-link
:to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getLoginMenu()?.id, slug: menuStore.getLoginMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
<p class="text-button cursor-pointer hover:text-button-hover">
{{ $t("login") }}
</p>
</nuxt-link>
</div>
</div>
</UiContainer>
</template>
<script lang="ts" setup>
import { onClickOutside } from '@vueuse/core'
import CheckoutInput from '../ui/CheckoutInput.vue'
import type { GenericResponse } from '~/types'
const props = defineProps<{
component: {
id: number
name: string
img: string[]
component_name: string
is_no_lang: boolean
page_name: string
front_section_lang: {
data: {
account_types: {
id: number
name: string
value: string
}[]
}
id_front_section: number
id_lang: number
}[]
}
}>()
const menuStore = useMenuStore()
const dropdownRef = ref(null)
const dropCountry = ref()
const user = ref({
data: {
name: '',
surname: '',
email: '',
phone: '',
},
})
const nameValidation = ref<boolean | null>(null)
const surnameValidation = ref<boolean | null>(null)
const emailValidation = ref<boolean | null>(null)
const phoneValidation = ref<boolean | null>(null)
const codeValidation = ref<boolean | null>(null)
const selectedType = ref()
if (props.component.front_section_lang)
selectedType.value
= props.component.front_section_lang[0].data.account_types[0].name
const sendForm = async () => {
const phoneNum = `${menuStore.selectedPhoneCountry.call_prefix}${user.value.data.phone}`.replaceAll(' ', '').trim()
console.log(phoneNum)
nameValidation.value = validation(user.value.data.name, 1, 49)
surnameValidation.value = validation(user.value.data.surname, 1, 49)
emailValidation.value = validation(user.value.data.email, 1, 49, REGEX_EMAIL)
phoneValidation.value = validation(phoneNum, 1, 49, REGEX_PHONE)
// codeValidation.value = validation(vCode.value as string, 1, 49);
const selectedTypeValue = props.component.front_section_lang[0].data.account_types.find(item => item.name === selectedType.value)?.value
if (nameValidation.value && surnameValidation.value && emailValidation.value && phoneValidation.value && codeValidation) {
try {
await useMyFetch<GenericResponse<object>>(
`/api/public/register/new_link?customer_type=${selectedTypeValue}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: user.value.data.email,
first_name: user.value.data.name,
last_name: user.value.data.surname,
phone_number: phoneNum,
// partner_code: vCode.value,
customer_type: selectedType.value,
}),
onErrorOccured: (_, status) => {
throw new Error(`HTTP error: ${status}`)
},
},
)
}
// successRegister.value = true;
// isLoader.value = false;
catch (error) {
console.error('getList error:', error)
}
}
}
onClickOutside(dropdownRef, () => {
dropCountry.value = false
})
</script>

267
components/section/RegistrationMain.vue
View File

@ -1,13 +1,5 @@
<template>
<UiContainer class="flex py-[15px] xl:py-20 sm:py-0">
<div
class="hidden xl:block rounded-2xl min-w-[40%] h-[830px]"
:style="{
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}"
/>
<div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12">
<div class="space-25-55">
<div class="flex flex-wrap-reverse gap-y-4 justify-between">
@ -16,133 +8,91 @@
</h2>
<button
class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer"
@click="menuStore.navigateToItem()"
>
@click="menuStore.navigateToItem()">
{{ $t("back_to_home") }}
</button>
</div>
<div class="space-y-[25px] sm:space-y-[30px]">
<p>{{ $t("current_information") }}</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-[30px]">
<div class="space-y-[15px]">
<p class="pl-6">
{{ $t("first_name") }}
</p>
<input
:placeholder="$t('first_name')"
type="text"
class="text-sm sm:text-xl border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
>
</div>
<div class="space-y-[15px]">
<p class="pl-6">
{{ $t("last_name") }}
</p>
<input
:placeholder="$t('last_name')"
type="text"
class="text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
>
</div>
<div class="space-y-[15px]">
<p class="pl-6">
{{ $t("email") }}
</p>
<input
:placeholder="$t('email')"
type="text"
class="text-sm sm:text-xl border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
>
</div>
<div ref="dropdownRef"
class="space-y-[15px]"
>
<CheckoutInput :id="1" v-model="user.data.name" :validation="nameValidation"
:validation-text="$t('enter_correct_data')" :placeholder="$t('first_name')">
{{ $t("first_name") }}
</CheckoutInput>
<CheckoutInput :id="1" v-model="user.data.surname" :validation="surnameValidation"
:validation-text="$t('enter_correct_data')" :placeholder="$t('last_name')">
{{ $t("last_name") }}
</CheckoutInput>
<CheckoutInput :id="1" v-model="user.data.email" :validation="emailValidation"
:validation-text="$t('enter_correct_data')" :placeholder="$t('email')">
{{ $t("email") }}
</CheckoutInput>
<div ref="dropdownRef" class="space-y-[15px]">
<p class="pl-6">
{{ $t("phone") }}
</p>
<div class="flex items-center border-2 border-block rounded-lg">
<div
class="relative z-50 bg-inherit ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0"
>
<div class="px-[25px]"
@click="dropCountry = !dropCountry"
>
<div
class="flex items-center gap-2 text-sm sm:text-xl uppercase text-text-light dark:text-text-dark"
>
<span
:class="[dropCountry && 'rotate-180', 'transition-all']"
>
<i
class="uil uil-angle-down text-2xl font-light cursor-pointer"
/></span>
<p class="text-sm sm:text-xl">
{{ menuStore.selectedPhoneCountry.iso_code }}
</p>
</div>
</div>
<div>
<div class="flex items-center border border-block rounded-lg">
<div
v-if="dropCountry"
class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-[130px] sm:w-full border border-button py-[10px] px-[5px] overflow-hidden"
>
<div class="overflow-y-auto h-[200px] w-full">
<p
v-for="item in menuStore.countries"
:key="item.iso_code"
class="w-full truncate whitespace-nowrap overflow-hidden hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
:title="item.name"
@click="
() => {
menuStore.selectedPhoneCountry = item;
dropCountry = false;
}
"
>
{{ item.name }}
</p>
class="relative z-50 bg-inherit ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
<div class="px-[25px]" @click="dropCountry = !dropCountry">
<div
class="flex items-center gap-2 text-sm sm:text-xl uppercase text-text-light dark:text-text-dark">
<span :class="[dropCountry && 'rotate-180', 'transition-all']">
<i class="uil uil-angle-down text-2xl font-light cursor-pointer" /></span>
<p class="text-sm sm:text-xl">
{{ menuStore.selectedPhoneCountry.iso_code }}
</p>
</div>
</div>
<div v-if="dropCountry"
class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-[130px] sm:w-full border border-button py-[10px] px-[5px] overflow-hidden">
<div class="overflow-y-auto h-[200px] w-full">
<p v-for="item in menuStore.countries" :key="item.iso_code"
class="w-full truncate whitespace-nowrap overflow-hidden hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
:title="item.name" @click="
() => {
menuStore.selectedPhoneCountry = item;
dropCountry = false;
}
">
{{ item.name }}
</p>
</div>
</div>
</div>
<p class="text-sm sm:text-xl font-normal">
{{ menuStore.selectedPhoneCountry.call_prefix }}
</p>
<input id="phone" v-model="user.data.phone" :placeholder="$t('phone')" type="text"
class="text-sm sm:text-xl placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0">
</div>
<p class="text-sm sm:text-xl font-normal">
{{ menuStore.selectedPhoneCountry.call_prefix }}
<p v-if="!phoneValidation && phoneValidation != null" class="mt-2 text-xs text-red-600">
{{ $t('enter_correct_data') }}
</p>
<input
id="phone"
:placeholder="$t('phone')"
type="text"
class="text-sm sm:text-xl placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0"
>
</div>
</div>
<div class="space-y-[15px]">
<p class="pl-6">
{{ $t("account_type") }}
</p>
<USelect
v-model="selectedType"
:items="
component.front_section_lang
&& component.front_section_lang[0].data.account_types
"
value-key="name"
:searchable="false"
:ui="{
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 h-[50px] sm:h-[67px] w-full p-0',
trailing: 'hidden w-full',
viewport: 'ring-0 min-w-full',
content:
'bg-bg-light dark:bg-bg-dark ring-0 border border-button',
leading:
'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-0 w-full',
group: 'px-[5px] py-[10px]',
item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 min-w-full',
}"
>
<USelect v-model="selectedType" :items="component.front_section_lang
&& component.front_section_lang[0].data.account_types
" value-key="name" :searchable="false" :ui="{
base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 h-[50px] sm:h-[67px] w-full p-0',
trailing: 'hidden w-full',
viewport: 'ring-0 min-w-full',
content:
'bg-bg-light dark:bg-bg-dark ring-0 border border-button',
leading:
'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-0 w-full',
group: 'px-[5px] py-[10px]',
item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 min-w-full',
}">
<template #leading="{ modelValue }">
<div
class="flex items-center justify-between gap-2 uppercase text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 w-full h-[50px] sm:h-[67px]"
>
class="flex items-center justify-between gap-2 uppercase text-sm sm:text-xl border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 w-full h-[50px] sm:h-[67px]">
<p class="truncate whitespace-nowrap">
{{
component.front_section_lang
@ -152,19 +102,14 @@
}}
</p>
<span>
<i
class="uil uil-angle-down text-2xl font-light cursor-pointer"
/></span>
<i class="uil uil-angle-down text-2xl font-light cursor-pointer" /></span>
</div>
</template>
<template #item="{ item }">
<div
class="flex items-center gap-2 cursor-pointer min-w-full"
>
<div class="flex items-center gap-2 cursor-pointer min-w-full">
<p
class="truncate whitespace-nowrap text-sm sm:text-xl font-medium uppercase text-text-light dark:text-text-dark opacity-100"
>
class="truncate whitespace-nowrap text-sm sm:text-xl font-medium uppercase text-text-light dark:text-text-dark opacity-100">
{{ item.name }}
</p>
</div>
@ -175,21 +120,14 @@
<p class="pl-6">
{{ $t("partner_code") }}
</p>
<input
:placeholder="$t('placeholder_password')"
type="text"
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
>
<input :placeholder="$t('placeholder_password')" type="text"
class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2">
</div>
</div>
</div>
</div>
<div
class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full"
>
<UiButtonArrow type="fill"
:arrow="true"
>
<div class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full">
<UiButtonArrow type="fill" :arrow="true" @click="sendForm()">
{{
$t("sign_up")
}}
@ -199,7 +137,8 @@
<p class="cursor-pointer hover:underline transition-all">
{{ $t("is_account") }}
</p>
<nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getLoginMenu()?.id, slug: menuStore.getLoginMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
<nuxt-link
:to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getLoginMenu()?.id, slug: menuStore.getLoginMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
<p class="text-button cursor-pointer hover:text-button-hover">
{{ $t("login") }}
</p>
@ -211,6 +150,8 @@
<script lang="ts" setup>
import { onClickOutside } from '@vueuse/core'
import CheckoutInput from '../ui/CheckoutInput.vue'
import type { GenericResponse } from '~/types'
const props = defineProps<{
component: {
@ -225,6 +166,7 @@ const props = defineProps<{
account_types: {
id: number
name: string
value: string
}[]
}
id_front_section: number
@ -237,11 +179,70 @@ const menuStore = useMenuStore()
const dropdownRef = ref(null)
const dropCountry = ref()
const user = ref({
data: {
name: '',
surname: '',
email: '',
phone: '',
},
})
const nameValidation = ref<boolean | null>(null)
const surnameValidation = ref<boolean | null>(null)
const emailValidation = ref<boolean | null>(null)
const phoneValidation = ref<boolean | null>(null)
const codeValidation = ref<boolean | null>(null)
const selectedType = ref()
if (props.component.front_section_lang)
selectedType.value
= props.component.front_section_lang[0].data.account_types[0].name
const sendForm = async () => {
const phoneNum = `${menuStore.selectedPhoneCountry.call_prefix}${user.value.data.phone}`.replaceAll(' ', '').trim()
console.log(phoneNum)
nameValidation.value = validation(user.value.data.name, 1, 49)
surnameValidation.value = validation(user.value.data.surname, 1, 49)
emailValidation.value = validation(user.value.data.email, 1, 49, REGEX_EMAIL)
phoneValidation.value = validation(phoneNum, 1, 49, REGEX_PHONE)
// codeValidation.value = validation(vCode.value as string, 1, 49);
const selectedTypeValue = props.component.front_section_lang[0].data.account_types.find(item => item.name === selectedType.value)?.value
if (nameValidation.value && surnameValidation.value && emailValidation.value && phoneValidation.value && codeValidation) {
try {
await useMyFetch<GenericResponse<object>>(
`/api/public/register/new_link?customer_type=${selectedTypeValue}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: user.value.data.email,
first_name: user.value.data.name,
last_name: user.value.data.surname,
phone_number: phoneNum,
// partner_code: vCode.value,
customer_type: selectedType.value,
}),
onErrorOccured: (_, status) => {
throw new Error(`HTTP error: ${status}`)
},
},
)
}
// successRegister.value = true;
// isLoader.value = false;
catch (error) {
console.error('getList error:', error)
}
}
}
onClickOutside(dropdownRef, () => {
dropCountry.value = false
})

55
components/ui/CheckoutInput.vue
View File

@ -1,53 +1,32 @@
<template>
<div class="space-y-[15px]">
<p :for="`base-input-${id}`"
class="pl-6"
>
<p :for="`base-input-${id}`" class="pl-6">
<slot />
</p>
<div class="flex flex-col">
<div class="flex relative">
<input
:id="`base-input-${id}`"
:value="modelValue"
:type="!isPasswordVisible ? type : 'text'"
:placeholder="placeholder"
:disabled="disabled"
class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
@input="
$emit(
'update:modelValue',
($event.target as HTMLInputElement).value,
)
"
@focus="$emit('focus')"
@blur="$emit('blur')"
>
<i
v-if="disabled"
class="uil uil-lock-alt text-[22px] absolute right-6 top-1/2 -translate-y-1/2 text-gray"
/>
<input :id="`base-input-${id}`" :value="modelValue" :type="!isPasswordVisible ? type : 'text'"
:placeholder="placeholder" :disabled="disabled"
class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
@input="
$emit(
'update:modelValue',
($event.target as HTMLInputElement).value,
)
" @focus="$emit('focus')" @blur="$emit('blur')">
<i v-if="disabled" class="uil uil-lock-alt text-[22px] absolute right-6 top-1/2 -translate-y-1/2 text-gray" />
<div
v-if="type === 'password'"
class="order-2 ml-1.5 cursor-pointer"
:title="
!isPasswordVisible ? $t('show_password') : $t('hide_password')
"
@click="isPasswordVisible = !isPasswordVisible"
>
<FaceObserver
class="ml-4 text-xl leading-6"
:is-password-visible="isPasswordVisible"
/>
<div v-if="type === 'password'" class="order-2 ml-1.5 cursor-pointer" :title="!isPasswordVisible ? $t('show_password') : $t('hide_password')
" @click="isPasswordVisible = !isPasswordVisible">
<FaceObserver class="ml-4 text-xl leading-6" :is-password-visible="isPasswordVisible" />
</div>
</div>
<!-- <p class="mt-2 text-xs text-red-600">{{ validationText }}</p> -->
<!-- <p v-if="!validation && validation != null" class="mt-2 text-xs text-red-600">
{{ validationText }}
</p> -->
<p v-if="!validation && validation != null" class="mt-2 text-xs text-red-600">
{{ validationText }}
</p>
</div>
</div>
</template>

9
stores/menuStore.ts
View File

@ -139,7 +139,7 @@ export const useMenuStore = defineStore('menuStore', () => {
return menuItems.value?.find(item => item.id === 14)
}
function getRegistrationMenu() {
function getPreRegistrationMenu() {
return menuItems.value?.find(item => item.id === 4)
}
@ -167,6 +167,10 @@ export const useMenuStore = defineStore('menuStore', () => {
return menuItems.value?.find(item => item.id === 10)
}
function getRegistrationMenu() {
return menuItems.value?.find(item => item.id === 15)
}
const getFirstImage = (size: 'l' | 'm' | 's' = 'm', needbaseurl: boolean) => {
const req = useRequestEvent()
const url = useRequestURL()
@ -296,7 +300,7 @@ export const useMenuStore = defineStore('menuStore', () => {
getLocales,
getProductMenu,
formatPrice,
getRegistrationMenu,
getPreRegistrationMenu,
getLoginMenu,
getInvestitionMenu,
getAboutUsMenu,
@ -304,5 +308,6 @@ export const useMenuStore = defineStore('menuStore', () => {
getAboutGoldMenu,
getContactMenu,
getShopMenu,
getRegistrationMenu,
}
})