183 lines
7.4 KiB
Vue
183 lines
7.4 KiB
Vue
<template>
|
|
<BaseViewWrapper title="Корзина">
|
|
<div v-if="cart.attention" role="alert" class="alert alert-warning">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
<span>{{ cart.attention }}</span>
|
|
</div>
|
|
|
|
<div v-if="cart.error_warning" role="alert" class="alert alert-error">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span>{{ cart.error_warning }}</span>
|
|
</div>
|
|
|
|
<div v-if="cart.items.length > 0" class="pb-10">
|
|
<div
|
|
v-for="(item, index) in cart.items"
|
|
:key="item.cart_id"
|
|
class="card card-border bg-base-100 card-sm mb-3"
|
|
:class="item.stock === false ? 'border-error' : ''"
|
|
>
|
|
<div class="card-body">
|
|
<div class="flex">
|
|
<div class="mr-2">
|
|
<div class="w-16 rounded">
|
|
<img :src="item.thumb"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<RouterLink :to="{name: 'product.show', params: {id: item.product_id}}" class="card-title">
|
|
{{ item.name }} <span v-if="! item.stock" class="text-error font-bold">***</span>
|
|
</RouterLink>
|
|
<p class="text-sm font-bold">{{ item.total }}</p>
|
|
<p>{{ item.price }}/ед</p>
|
|
<div>
|
|
<div v-for="option in item.option">
|
|
<p><span class="font-bold">{{ option.name }}</span>: {{ option.value }}</p>
|
|
<!-- <component-->
|
|
<!-- v-if="SUPPORTED_OPTION_TYPES.includes(option.type) && componentMap[option.type]"-->
|
|
<!-- :is="componentMap[option.type]"-->
|
|
<!-- :option="option"-->
|
|
<!-- />-->
|
|
<!-- <div v-else class="text-sm text-error">-->
|
|
<!-- Тип опции "{{ option.type }}" не поддерживается.-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-actions justify-between">
|
|
<Quantity
|
|
:disabled="cart.isLoading"
|
|
v-model="item.quantity"
|
|
@update:modelValue="cart.setQuantity(item.cart_id, $event)"
|
|
/>
|
|
<button class="btn btn-error" @click="removeItem(item, item.cart_id, index)" :disabled="cart.isLoading">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-border bg-base-100 mb-3">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Ваша корзина</h2>
|
|
<div v-for="total in cart.totals">
|
|
<div class="flex justify-between">
|
|
<span class="text-xs text-base-content mr-2">{{ total.title }}:</span>
|
|
<span v-if="cart.isLoading" class="loading loading-spinner loading-xs"></span>
|
|
<span v-else class="text-xs font-bold">{{ total.text }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="settings.feature_coupons || settings.feature_vouchers"
|
|
class="card card-border bg-base-100 mb-3"
|
|
>
|
|
<div class="card-body">
|
|
<div v-if="settings.feature_coupons" class="join">
|
|
<input v-model="cart.coupon" type="text" class="input" placeholder="Промокод"/>
|
|
<button
|
|
class="btn"
|
|
:disabled="!cart.coupon"
|
|
@click="cart.applyCoupon"
|
|
>Применить</button>
|
|
</div>
|
|
|
|
<div v-if="settings.feature_vouchers" class="join">
|
|
<input v-model="cart.voucher" type="text" class="input" placeholder="Подарочный сертификат"/>
|
|
<button
|
|
class="btn"
|
|
:disabled="!cart.voucher"
|
|
@click="cart.applyVoucher"
|
|
>Применить</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-checkout fixed px-4 pt-4 left-0 w-full z-50 flex justify-end items-center gap-2">
|
|
<button
|
|
class="btn btn-primary select-none shadow-xl"
|
|
:disabled="cart.canCheckout === false"
|
|
@click="goToCheckout"
|
|
>
|
|
Перейти к оформлению
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
class="text-center rounded-2xl"
|
|
>
|
|
<div class="text-5xl mb-4">🛒</div>
|
|
<p class="text-lg mb-3">{{ settings.texts.text_empty_cart }}</p>
|
|
<RouterLink class="btn btn-primary" to="/">Начать покупки</RouterLink>
|
|
</div>
|
|
</BaseViewWrapper>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useCartStore } from '../stores/CartStore.js'
|
|
import Quantity from "@/components/Quantity.vue";
|
|
// import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
|
|
import OptionRadio from "@/components/ProductOptions/Cart/OptionRadio.vue";
|
|
import OptionCheckbox from "@/components/ProductOptions/Cart/OptionCheckbox.vue";
|
|
import OptionText from "@/components/ProductOptions/Cart/OptionText.vue";
|
|
import {computed, onMounted} from "vue";
|
|
import {useRoute, useRouter} from "vue-router";
|
|
import {useSettingsStore} from "@/stores/SettingsStore.js";
|
|
import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
|
|
import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
|
|
import BaseViewWrapper from "@/views/BaseViewWrapper.vue";
|
|
|
|
const route = useRoute();
|
|
const yaMetrika = useYaMetrikaStore();
|
|
const cart = useCartStore();
|
|
const router = useRouter();
|
|
const settings = useSettingsStore();
|
|
|
|
// const componentMap = {
|
|
// radio: OptionRadio,
|
|
// select: OptionRadio,
|
|
// checkbox: OptionCheckbox,
|
|
// text: OptionText,
|
|
// textarea: OptionText,
|
|
// };
|
|
|
|
const lastTotal = computed(() => {
|
|
return cart.totals.at(-1) ?? null;
|
|
});
|
|
|
|
function removeItem(cartItem, cartId, index) {
|
|
cart.removeItem(cartItem, cartId, index);
|
|
window.Telegram.WebApp.HapticFeedback.notificationOccurred('error');
|
|
}
|
|
|
|
function goToCheckout() {
|
|
router.push({name: 'checkout'});
|
|
}
|
|
|
|
onMounted(async () => {
|
|
window.document.title = 'Корзина покупок';
|
|
yaMetrika.pushHit(route.path, {
|
|
title: 'Корзина покупок',
|
|
});
|
|
yaMetrika.reachGoal(YA_METRIKA_GOAL.VIEW_CART);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.btn-checkout {
|
|
bottom: calc(var(--spacing, 0px) * 22 + var(--tg-safe-area-inset-bottom, 0px))
|
|
}
|
|
</style> |