feat: add product view page

spa/src/views/Home.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+      class="hero min-h-screen relative"
+      style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);"
+  >
+    <div class="hero-overlay"></div>
+    <div class="hero-content text-neutral-content text-center">
+      <div class="max-w-md">
+        <h1 class="mb-5 text-5xl font-bold">Товарняк</h1>
+        <p class="mb-5">
+          Мы гордо продаём то, что другие боятся.
+        </p>
+        <button class="btn btn-primary" @click="scrollToProducts">
+          Показать товар лицом
+        </button>
+        <div class="mt-4 flex justify-center">
+          <svg
+              class="w-6 h-6 text-white animate-bounce"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </div>
+
+        <div class="absolute text-gray-400 left-3 bottom-3">
+          {{ platform }}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div ref="goodsRef">
+    <div class="bg-base-100">
+      <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+        <h2 class="sr-only">Products</h2>
+
+        <div class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+          <RouterLink v-for="product in products" :key="product.id" class="group" :to="`/product/${product.id}`">
+            <div class="carousel carousel-center rounded-box" ref="carouselRef" @scroll.passive="onScroll">
+              <div v-for="(image, i) in product.images" :key="i" class="carousel-item">
+                <img :src="image.url" :alt="image.alt"/>
+              </div>
+            </div>
+
+            <h3 class="mt-4 text-sm">{{ product.name }}</h3>
+            <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
+          </RouterLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {$fetch} from 'ofetch';
+import {onMounted, ref} from "vue";
+import {useHapticFeedback, useMiniApp} from 'vue-tg';
+
+const hapticFeedback = useHapticFeedback();
+
+const products = ref([]);
+
+onMounted(async () => {
+  const {data} = await $fetch('/index.php?route=extension/tgshop/handle&api_action=products');
+  products.value = data;
+});
+
+const goodsRef = ref();
+function scrollToProducts() {
+  goodsRef.value?.scrollIntoView({ behavior: 'smooth' });
+}
+
+const tg = useMiniApp();
+const platform = ref();
+platform.value = tg.platform;
+
+const carouselRef = ref();
+let lastScrollLeft = 0;
+function onScroll(e) {
+  const scrollLeft = e.target.scrollLeft;
+  const delta = Math.abs(scrollLeft - lastScrollLeft);
+
+  if (delta > 30) {
+    hapticFeedback.impactOccurred('soft');
+    lastScrollLeft = scrollLeft;
+  }
+}
+
+import { useBackButton } from 'vue-tg';
+const backButton = useBackButton();
+
+onMounted(() => {
+  if (backButton.isVisible.value) {
+    backButton.hide();
+  }
+})
+</script>

spa/src/views/Product.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <div>
+      <div class="carousel" ref="carouselRef" @scroll.passive="onScroll">
+        <div v-for="image in product.images" class="carousel-item w-full">
+          <img
+              :src="image.url"
+              class="w-full"
+              :alt="image.alt" />
+        </div>
+      </div>
+
+      <!-- Product info -->
+      <div class="mx-auto max-w-2xl px-4 pt-3 pb-16 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:grid-rows-[auto_auto_1fr] lg:gap-x-8 lg:px-8 lg:pt-16 lg:pb-24">
+        <div class="lg:col-span-2 lg:border-r lg:pr-8">
+          <h1 class="text-2xl font-bold tracking-tight sm:text-3xl">{{ product.name }}</h1>
+        </div>
+
+        <!-- Options -->
+        <div class="mt-4 lg:row-span-3 lg:mt-0">
+          <p class="text-3xl tracking-tight">{{ product.price }}</p>
+        </div>
+
+        <div class="py-10 lg:col-span-2 lg:col-start-1 lg:border-r lg:border-gray-200 lg:pt-6 lg:pr-8 lg:pb-16">
+          <!-- Description and details -->
+          <div>
+            <h3 class="sr-only">Description</h3>
+
+            <div class="space-y-6">
+              <p class="text-base" v-html="product.description"></p>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue";
+import {$fetch} from "ofetch";
+import { useRoute } from 'vue-router'
+import { useRouter } from 'vue-router'
+import {useBackButton, useHapticFeedback} from 'vue-tg';
+const hapticFeedback = useHapticFeedback();
+
+const router = useRouter()
+const route = useRoute()
+const productId = route.params.id
+
+const id = 28;
+const product = ref([]);
+
+onMounted(async () => {
+  const {data} = await $fetch(`/index.php?route=extension/tgshop/handle&api_action=product_show&id=${productId}`);
+  product.value = data;
+});
+
+const backButton = useBackButton();
+if (typeof backButton.show === 'function') {
+  backButton.show();
+  backButton.onClick(() => {
+    router.back()
+  });
+}
+
+const carouselRef = ref();
+let lastScrollLeft = 0;
+function onScroll(e) {
+  const scrollLeft = e.target.scrollLeft;
+  const delta = Math.abs(scrollLeft - lastScrollLeft);
+
+  if (delta > 30) {
+    hapticFeedback.impactOccurred('soft');
+    lastScrollLeft = scrollLeft;
+  }
+}
+
+
+</script>