-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat!: address and paymentMethod (#236)
* fix: limit on increment * feat: country code * feat!: address and paymentMethod
- Loading branch information
1 parent
105122a
commit 25b0b4e
Showing
9 changed files
with
267 additions
and
122 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,96 +1,147 @@ | ||
| <template> | ||
| <div class="mb-6 px-4 py-5 md:px-6 md:py-6 bg-white rounded-3xl"> | ||
| <!-- <h2 class="mb-2 text-xl md:text-2xl font-medium"> | ||
| Условия доставки | ||
| </h2> --> | ||
|
|
||
| <div class="mb-6 px-4 py-5 md:px-6 md:py-6 bg-white rounded-3xl space-y-5"> | ||
| <CartDeliveryMethodSwitch /> | ||
|
|
||
| <div class="w-full mt-4"> | ||
| <div class="w-full"> | ||
| <h3 class="mb-2 text-lg md:text-xl font-medium"> | ||
| Контакты | ||
| </h3> | ||
|
|
||
| <div class="grid grid-cols-1 md:grid-cols-2 md:gap-2"> | ||
| <input | ||
| type="text" | ||
| <UiInput | ||
| v-model="phoneNumber" | ||
| type="tel" | ||
| name="phone" | ||
| value="" | ||
| placeholder="Ваш телефон" | ||
| class="px-4 py-3 mb-2 w-full border border-neutral-200 rounded-2xl outline-2 outline-offset-1 outline-neutral-500 placeholder:text-neutral-400 data-[valid=true]:outline-teal-400" | ||
| data-valid="{isValidPhone}" | ||
| > | ||
| maxlength="17" | ||
| :class="{ '!outline-emerald-500': isValidPhone }" | ||
| @change="formatPhone" | ||
| /> | ||
|
|
||
| <input | ||
| type="text" | ||
| <UiInput | ||
| name="name" | ||
| placeholder="Ваше имя" | ||
| class="px-4 py-3 mb-2 w-full border border-neutral-200 rounded-2xl" | ||
| > | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="w-full mt-4"> | ||
| <div v-if="checkout?.deliveryMethod === 'DELIVERY'" class="w-full"> | ||
| <h3 class="mb-2 text-lg md:text-xl font-medium"> | ||
| Укажите свой адрес | ||
| </h3> | ||
| <input | ||
| type="text" | ||
| <UiLabel for="street"> | ||
| Улица и дом | ||
| </UiLabel> | ||
| <UiInput | ||
| id="street" | ||
| name="street" | ||
| placeholder="Улица и дом" | ||
| class="px-4 py-3 mb-2 w-full border border-neutral-200 rounded-2xl" | ||
| > | ||
|
|
||
| <div class="mb-2 grid grid-cols-2 md:grid-cols-4 gap-2"> | ||
| <input | ||
| type="text" | ||
| name="apartment" | ||
| placeholder="Кв./офис" | ||
| class="px-4 py-3 border border-neutral-200 rounded-2xl" | ||
| > | ||
|
|
||
| <input | ||
| type="text" | ||
| name="doorphone" | ||
| placeholder="Домофон" | ||
| class="px-4 py-3 border border-neutral-200 rounded-2xl" | ||
| > | ||
|
|
||
| <input | ||
| type="text" | ||
| name="entrance" | ||
| placeholder="Подъезд" | ||
| class="px-4 py-3 border border-neutral-200 rounded-2xl" | ||
| > | ||
|
|
||
| <input | ||
| type="text" | ||
| name="floor" | ||
| placeholder="Этаж" | ||
| class="px-4 py-3 border border-neutral-200 rounded-2xl" | ||
| > | ||
| /> | ||
|
|
||
| <div class="mt-2 mb-2 grid grid-cols-2 md:grid-cols-4 gap-2"> | ||
| <div> | ||
| <UiLabel for="apartment"> | ||
| Кв./офис | ||
| </UiLabel> | ||
| <UiInput | ||
| id="apartment" | ||
| name="apartment" | ||
| /> | ||
| </div> | ||
|
|
||
| <div> | ||
| <UiLabel for="doorphone"> | ||
| Домофон | ||
| </UiLabel> | ||
| <UiInput | ||
| id="doorphone" | ||
| name="doorphone" | ||
| /> | ||
| </div> | ||
|
|
||
| <div> | ||
| <UiLabel for="entrance"> | ||
| Подъезд | ||
| </UiLabel> | ||
| <UiInput | ||
| id="entrance" | ||
| name="entrance" | ||
| /> | ||
| </div> | ||
|
|
||
| <div> | ||
| <UiLabel for="floor"> | ||
| Этаж | ||
| </UiLabel> | ||
| <UiInput | ||
| id="floor" | ||
| name="floor" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div> | ||
| <UiLabel for="address-note"> | ||
| Комментарий | ||
| </UiLabel> | ||
| <UiTextarea | ||
| id="address-note" | ||
| name="address-note" | ||
| placeholder="Чтобы курьер быстрее вас нашел, укажите дополнительную информацию" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div v-if="checkout?.deliveryMethod === 'WAREHOUSE'"> | ||
| <h3 class="mb-2 text-lg md:text-xl font-medium"> | ||
| Выберите адрес | ||
| </h3> | ||
|
|
||
| <input | ||
| type="text" | ||
| name="comment" | ||
| placeholder="Комментарий" | ||
| class="px-4 py-3 mb-2 w-full border border-neutral-200 rounded-2xl" | ||
| > | ||
| <UiTextarea>123</UiTextarea> | ||
| <div class="grid grid-cols-1 md:grid-cols-1 gap-2"> | ||
| <UiButton v-for="warehouse in channel?.warehouses" :key="warehouse.id" variant="secondary" class="w-full min-h-14 flex flex-row flex-wrap gap-2 justify-start items-center" @click="selectedWarehouseId = warehouse.id"> | ||
| <Icon :name="warehouse.id === selectedWarehouseId ? icons.bookmarkCheck : icons.bookmark" class="w-6 h-6 text-neutral-300" :class="{ 'w-7 h-7 !text-emerald-500': warehouse.id === selectedWarehouseId }" /> | ||
| <p class="font-medium text-lg leading-tight break-all"> | ||
| {{ warehouse.address }} | ||
| </p> | ||
| </UiButton> | ||
| </div> | ||
| </div> | ||
| <h2 class="mt-4 mb-2 text-xl md:text-2xl font-medium"> | ||
| Время доставки | ||
| </h2> | ||
| <div class="w-full"> | ||
| <h2 class="mb-2 text-xl md:text-2xl font-medium"> | ||
| Время | ||
| </h2> | ||
|
|
||
| <div class="flex flex-row gap-2 items-center"> | ||
| <Icon :name="icons.clock" /> | ||
| Сейчас: 45-60 мин | ||
| <div class="flex flex-row gap-2 items-center"> | ||
| <Icon :name="icons.clock" /> | ||
| Ближайшее: 45-60 мин | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| const { icons } = useAppConfig() | ||
| const { channel } = await useChannel() | ||
| const { checkout } = useCheckout() | ||
| const selectedWarehouseId = ref('') | ||
| const phoneNumber = ref('') | ||
| const countryCode = computed(() => channel.value?.countryCode as CountryCode) | ||
| const isValidPhone = ref(false) | ||
| watch( | ||
| () => phoneNumber.value, | ||
| () => { | ||
| if (phoneNumber.value.length > 17) { | ||
| return | ||
| } | ||
| getPhoneNumberFormatter(countryCode.value).input(phoneNumber.value) | ||
| isValidPhone.value = checkPhoneNumberValidity(phoneNumber.value, countryCode.value) | ||
| }, | ||
| ) | ||
| function formatPhone() { | ||
| getPhoneNumberFormatter(countryCode.value).input(phoneNumber.value) | ||
| phoneNumber.value = formatPhoneNumber(phoneNumber.value, countryCode.value) | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.