wip: cart

spa/src/views/Cart.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="max-w-3xl mx-auto p-4 space-y-6">
+    <h2 class="text-2xl font-semibold text-gray-900">Корзина</h2>
+
+    <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"
+      >
+        <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>
+        </div>
+
+        <button
+            @click="remove(item)"
+            class="ml-4 text-sm text-red-500 hover:underline"
+        >
+          Удалить
+        </button>
+      </div>
+    </div>
+
+    <div
+        v-else
+        class="text-center text-gray-500 py-12 border border-dashed border-gray-300 rounded-2xl bg-white"
+    >
+      <p class="text-lg">Ваша корзина пуста</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useCartStore } from '../stores/CartStore.js'
+
+const cart = useCartStore()
+
+function increase(item) {
+  item.quantity++
+}
+
+function decrease(item) {
+  if (item.quantity > 1) {
+    item.quantity--
+  } else {
+    remove(item)
+  }
+}
+
+function remove(item) {
+  const index = cart.items.findIndex(i => i.productId === item.productId)
+  if (index !== -1) cart.items.splice(index, 1)
+}
+</script>