wip: shopping cart

2025-07-23 18:40:57 +03:00
parent bb2ee38118
commit 49d41747d3
22 changed files with 545 additions and 141 deletions
--- a/spa/src/views/Cart.vue
+++ b/spa/src/views/Cart.vue
@@ -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);
--- a/spa/src/views/CategoriesList.vue
+++ b/spa/src/views/CategoriesList.vue
@@ -2,29 +2,81 @@
  <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8 mb-5">
    <h2 class="text-3xl mb-5">Категории</h2>

-    <div class="grid grid-cols-2 gap-x-6 gap-y-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
-      <RouterLink
-          v-for="category in categories"
-          :key="category.id"
-          :to="`/category/${category.id}`"
-          class="group border border-gray-200 rounded-lg py-2 px-4 flex flex-col justify-center items-center"
-      >
-        <img :src="category.image" :alt="category.name" loading="lazy"/>
-        <h3 class="mt-4 text-lg">{{ category.name }}</h3>
-      </RouterLink>
+    <button v-if="parentId" class="py-2 px-4 flex items-center mb-3 cursor-pointer" @click="goBack">
+      <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="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+      </svg>
+
+      <span class="ml-2">Назад к "{{ parentCategory.name }}"</span>
+    </button>
+
+    <button
+        v-if="parentId"
+        class="py-2 px-4 flex items-center mb-3 cursor-pointer"
+        @click.prevent="showProductsInParentCategory"
+    >
+      <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="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
+      </svg>
+
+      <span class="ml-2">Показать все товары</span>
+    </button>
+
+    <div v-for="category in categories" :key="category.id">
+      <CategoryItem
+          :category="category"
+          @onSelect="onSelect"
+      />
    </div>
  </div>
 </template>

 <script setup>
-import {onMounted, ref} from "vue";
-import ftch from "../utils/ftch.js";
+import {computed, onMounted} from "vue";
+import {router} from "@/router.js";
+import {useCategoriesStore} from "@/stores/CategoriesStore.js";
+import {useRoute} from "vue-router";
+import CategoryItem from "@/components/CategoriesList/CategoryItem.vue";

-const categories = ref([]);
+const route = useRoute();
+const parentId = computed(() => route.params.id ? Number(route.params.id) : null);
+const parentCategory = computed(() => findCategoryById(parentId.value));
+const categoriesStore = useCategoriesStore();
+
+function findCategoryById(id) {
+  for (const category of categoriesStore.categories) {
+    if (category.id === id) {
+      return category;
+    }
+  }
+  return []
+}
+
+const categories = computed(() => {
+  if (! parentId.value) {
+    return categoriesStore.categories;
+  }
+
+  return findCategoryById(parentId.value).children;
+});
+
+function onSelect(category) {
+  if (category.children.length === 0) {
+    router.push({ name: "product.categories.show", params: { category_id: category.id } });
+  } else {
+    router.push({ name: "category.show", params: { id: category.id } });
+  }
+}
+
+function goBack() {
+  router.back();
+}
+
+function showProductsInParentCategory() {
+  router.push({ name: "product.categories.show", params: { category_id: parentId.value } });
+}

 onMounted(async () => {
-  const {data} = await ftch('categoriesList');
-  console.log(data);
-  categories.value = data;
+  categoriesStore.fetchCategories();
 });
 </script>
--- a/spa/src/views/Checkout.vue
+++ b/spa/src/views/Checkout.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30">
+    <h2 class="text-2xl">
+      Корзина
+      <span class="loading loading-spinner loading-md"></span>
+    </h2>
+  </div>
+
+</template>
+
+<script setup>
+
+</script>
--- a/spa/src/views/Product.vue
+++ b/spa/src/views/Product.vue
@@ -15,6 +15,8 @@

        <div class="mt-4 lg:row-span-3 lg:mt-0">
          <p class="text-3xl tracking-tight">{{ product.price }}</p>
+          <p v-if="false" class="text-xs">Кол-во на складе: {{ product.quantity }} шт.</p>
+          <p v-if="product.minimum && product.minimum > 1">Минимальное кол-ва для заказа: {{ product.minimum }}</p>
        </div>

        <div v-if="product.options && product.options.length" class="mt-4">
@@ -67,13 +69,13 @@

 <script setup>
 import {computed, onMounted, ref} from "vue";
-import {$fetch} from "ofetch";
 import {useRoute} from 'vue-router'
 import ProductOptions from "../components/ProductOptions/ProductOptions.vue";
 import {useCartStore} from "../stores/CartStore.js";
 import ProductImageSwiper from "../components/ProductImageSwiper.vue";
 import Quantity from "../components/Quantity.vue";
 import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
+import {apiFetch} from "@/utils/ftch.js";

 const route = useRoute();
 const productId = computed(() => route.params.id);
@@ -117,7 +119,7 @@ function setQuantity(newQuantity) {
 }

 onMounted(async () => {
-  const {data} = await $fetch(`/index.php?route=extension/tgshop/handle&api_action=product_show&id=${productId.value}`);
+  const {data} = await apiFetch(`/index.php?route=extension/tgshop/handle&api_action=product_show&id=${productId.value}`);
  product.value = data;
 });
 </script>