110 lines
3.2 KiB
Vue
110 lines
3.2 KiB
Vue
<template>
|
|
<div class="contacts">
|
|
<UInput
|
|
v-model="name"
|
|
size="xl"
|
|
placeholder=" "
|
|
:ui="{ base: 'peer' }"
|
|
class="relative"
|
|
>
|
|
<label
|
|
class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
|
|
name
|
|
? '-top-3 text-sm text-highlighted font-medium'
|
|
: 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
|
|
]"
|
|
>
|
|
<span class="inline-flex bg-default px-1">Имя</span>
|
|
</label>
|
|
</UInput>
|
|
|
|
<UInput
|
|
v-model="surname"
|
|
size="xl"
|
|
placeholder=" "
|
|
:ui="{ base: 'peer' }"
|
|
class="relative"
|
|
>
|
|
<label
|
|
class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
|
|
surname
|
|
? '-top-3 text-sm text-highlighted font-medium'
|
|
: 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
|
|
]"
|
|
>
|
|
<span class="inline-flex bg-default px-1">Фамилия</span>
|
|
</label>
|
|
</UInput>
|
|
|
|
<UInput
|
|
v-model="phone"
|
|
v-maska="'+7 (###) ###-##-##'"
|
|
size="xl"
|
|
placeholder=" "
|
|
:ui="{ base: 'peer' }"
|
|
class="relative"
|
|
>
|
|
<label
|
|
class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
|
|
phone
|
|
? '-top-3 text-sm text-highlighted font-medium'
|
|
: 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
|
|
]"
|
|
>
|
|
<span class="inline-flex bg-default px-1">телефон</span>
|
|
</label>
|
|
</UInput>
|
|
|
|
<UInput
|
|
v-model="email"
|
|
size="xl"
|
|
placeholder=" "
|
|
:ui="{ base: 'peer' }"
|
|
class="relative"
|
|
trailing-icon="i-lucide-at-sign"
|
|
>
|
|
<label
|
|
class="pointer-events-none absolute left-3 text-base transition-all peer-focus:-top-3 peer-focus:text-highlighted peer-focus:text-sm peer-focus:font-medium" :class="[
|
|
email
|
|
? '-top-3 text-sm text-highlighted font-medium'
|
|
: 'top-3 text-dimmed peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-dimmed',
|
|
]"
|
|
>
|
|
<span class="inline-flex bg-default px-1">email</span>
|
|
</label>
|
|
</UInput>
|
|
|
|
<UButton
|
|
size="xl"
|
|
label="продолжить"
|
|
class="justify-center text-center"
|
|
@click="nextStep"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useCheckout } from '../../composables/useCheckout'
|
|
|
|
const name = ref('')
|
|
const surname = ref('')
|
|
const phone = ref('')
|
|
const email = ref('')
|
|
|
|
const { nextStep } = useCheckout()
|
|
|
|
definePageMeta({
|
|
layout: 'checkout',
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.contacts {
|
|
margin-inline: auto;
|
|
max-width: 400px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
</style>
|