nikitakiselev/interview-demo-code
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

wip: shopping cart

Browse Source
This commit is contained in:
Nikita Kiselev
2025-07-23 18:40:57 +03:00
parent bb2ee38118
commit 49d41747d3
22 changed files with 545 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
spa/src/views/Cart.vue
View File

@@ -5,9 +5,23 @@
<span v-if="cart.isLoading" class="loading loading-spinner loading-md"></span>
</h2>
<div v-if="cart.products.length > 0">
<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">
<div
v-for="item in cart.products"
v-for="item in cart.items"
:key="item.cart_id"
class="card card-border bg-base-100 card-sm mb-3"
:class="item.stock === false ? 'border-error' : ''"
@@ -19,21 +33,20 @@
</div>
</div>
<p v-if="! item.stock" class="text-error font-bold">Товар отсутствует на складе в нужном количестве.</p>
<h2 class="card-title">{{ item.name }}</h2>
<p class="text-sm font-bold">{{ formatPrice(item.total) }} ₽</p>
<p>{{ formatPrice(item.price) }} ₽/ед</p>
<h2 class="card-title">{{ item.name }} <span v-if="! item.stock" class="text-error font-bold">***</span></h2>
<p class="text-sm font-bold">{{ item.total }}</p>
<p>{{ item.price }}/ед</p>
<div>
<div v-for="option in item.option">
<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>
<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 class="card-actions justify-between">
@@ -51,14 +64,29 @@
</div>
</div>
<div class="card card-border bg-base-100">
<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 class="fixed px-4 pb-10 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex justify-between items-center gap-2 border-t-1 border-t-base-300">
<div>
<span class="text-xs text-base-content mr-2">Всего:</span>
<span v-if="cart.isLoading" class="loading loading-spinner loading-xs"></span>
<span v-else class="text-accent font-bold">{{ formatPrice(cart.total) }} ₽</span>
<div v-if="lastTotal">
<span class="text-xs text-base-content mr-2">{{ lastTotal.title }}:</span><br>
<span v-if="cart.isLoading" class="loading loading-spinner loading-xs"></span>
<span v-else class="text-accent font-bold">{{ lastTotal.text }}</span>
</div>
</div>
<button class="btn btn-primary" :disabled="cart.isLoading">Перейти к оформлению</button>
<button class="btn btn-primary" :disabled="cart.canCheckout === false">Перейти к оформлению</button>
</div>
</div>
@@ -66,7 +94,8 @@
v-else
class="text-center rounded-2xl"
>
<p class="text-lg">Ваша корзина пуста</p>
<p class="text-lg mb-3">Ваша корзина пуста</p>
<RouterLink class="btn btn-primary" to="/">Начать покупки.</RouterLink>
</div>
</div>
</template>
@@ -74,21 +103,25 @@
<script setup>
import { useCartStore } from '../stores/CartStore.js'
import Quantity from "@/components/Quantity.vue";
import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
// 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 {formatPrice} from "../helpers.js";
import {computed} from "vue";
const cart = useCartStore();
const componentMap = {
radio: OptionRadio,
select: OptionRadio,
checkbox: OptionCheckbox,
text: OptionText,
textarea: OptionText,
};
// const componentMap = {
// radio: OptionRadio,
// select: OptionRadio,
// checkbox: OptionCheckbox,
// text: OptionText,
// textarea: OptionText,
// };
const lastTotal = computed(() => {
return cart.totals.at(-1) ?? null;
});
function removeItem(cartId) {
cart.removeItem(cartId);