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-21 14:24:05 +03:00
parent e3cc0d4b10
commit ce2c9e374d
5 changed files with 53 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
spa/src/components/ProductOptions/ProductOptions.vue
View File

@@ -16,5 +16,4 @@ import OptionTextarea from "./Types/OptionTextarea.vue";
import OptionSelect from "./Types/OptionSelect.vue";
const options = defineModel();
</script>

2
spa/src/components/ProductOptions/Types/OptionRadio.vue
View File

@@ -16,7 +16,7 @@
class="absolute inset-0 appearance-none focus:outline-none disabled:cursor-not-allowed"
/>
<span class="text-xs font-medium">
<span class="text-xs font-medium">
{{ value.name }}<span v-if="value.price"> ({{ value.price_prefix }}{{ value.price }})</span>
</span>
</label>

18
spa/src/components/Quantity.vue
View File

@@ -1,15 +1,29 @@
<template>
<div class="flex items-center text-center">
<button class="btn btn-lg" @click="inc">-</button>
<button class="btn" :class="btnClassList" @click="inc">-</button>
<div class="w-10 h-10 flex items-center justify-center font-bold">{{ model }}</div>
<button class="btn btn-lg" @click="dec">+</button>
<button class="btn" :class="btnClassList" @click="dec">+</button>
</div>
</template>
<script setup>
import {computed} from "vue";
const model = defineModel();
const props = defineProps({
max: Number,
size: {
type: String,
default: '',
}
});
const btnClassList = computed(() => {
let classList = ['btn'];
if (props.size) {
classList.push(`btn-${props.size}`);
}
return classList;
});
function inc() {

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

@@ -1,38 +1,44 @@
<template>
<div class="max-w-3xl mx-auto p-4 space-y-6">
<h2 class="text-2xl font-semibold text-gray-900">Корзина</h2>
<h2 class="text-2xl">Корзина</h2>
<div v-if="cart.items.length > 0">
<div
v-if="cart.items.length"
class="rounded-2xl border border-gray-200 bg-white shadow-md overflow-hidden divide-y"
>
<div
v-for="item in cart.items"
:key="item.productId"
class="p-4 flex items-center justify-between"
class="card w-96 bg-base-100 card-sm shadow-sm"
>
<div class="flex-1">
<h3 class="text-base font-semibold text-gray-900">{{ item.productName }}</h3>
<p class="text-sm text-gray-500 mt-1">{{ item.price }}</p>
<div class="flex items-center gap-2 mt-3">
<button
class="w-8 h-8 rounded-full bg-gray-100 text-xl text-gray-700 flex items-center justify-center active:scale-90 transition"
@click="decrease(item)"
>−</button>
<span class="text-sm font-medium w-6 text-center">{{ item.quantity }}</span>
<button
class="w-8 h-8 rounded-full bg-gray-100 text-xl text-gray-700 flex items-center justify-center active:scale-90 transition"
@click="increase(item)"
>＋</button>
<div class="card-body">
<h2 class="card-title">{{ item.productName }}</h2>
<p class="text-sm mt-1">{{ item.price }}</p>
<div v-if="item.options.length">
<p v-for="option in item.options.filter(i => ['checkbox', 'radio', 'select', 'text', 'textarea'].indexOf(i.type) !== -1)">
<span v-if="option.type === 'radio'" class="text-xs font-medium">
{{ option.value.name }}<span v-if="option.value.price"> ({{ option.value.price_prefix }}{{ option.value.price }})</span>
</span>
<span v-else-if="option.type === 'checkbox'" class="text-xs font-medium">
<span v-for="check in option.value" class="text-xs font-medium">
{{ check.name }}<span v-if="check.price"> ({{ check.price_prefix }}{{ check.price }})</span>
</span>
</span>
<span v-else-if="option.type === 'select'" class="text-xs font-medium">
{{ option.value.name }}<span v-if="option.value.price"> ({{ option.value.price_prefix }}{{ option.value.price }})</span>
</span>
<span v-else-if="option.type === 'text' || option.type === 'textarea'" class="text-xs font-medium">
{{ option.value }}
</span>
</p>
</div>
<div class="card-actions justify-between">
<Quantity v-model="item.quantity" @update:modelValue="onQuantityUpdate(item, $event)"/>
<button class="btn btn-error" @click="remove(item)">
<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>
<button
@click="remove(item)"
class="ml-4 text-sm text-red-500 hover:underline"
>
Удалить
</button>
</div>
</div>
@@ -47,17 +53,12 @@
<script setup>
import { useCartStore } from '../stores/CartStore.js'
import Quantity from "@/components/Quantity.vue";
const cart = useCartStore()
function increase(item) {
item.quantity++
}
function decrease(item) {
if (item.quantity > 1) {
item.quantity--
} else {
function onQuantityUpdate(item, newQuantity) {
if (newQuantity === 0) {
remove(item)
}
}

1
spa/src/views/Product.vue
View File

@@ -55,6 +55,7 @@
:modelValue="quantity"
@update:modelValue="setQuantity"
:max="10"
size="lg"
/>
</div>
</div>