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

feat: WIP

Browse Source
This commit is contained in:
Nikita Kiselev
2025-07-10 18:31:02 +03:00
parent c3664025ba
commit 846fa64fb4
68 changed files with 4144 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
spa/src/App.vue
View File

@@ -1,63 +1,7 @@
<template>
<div class="relative flex justify-center items-center p-3">
<h1 class="text-gray-950 text-lg font-bold truncate">Демо Телеграм-магазин</h1>
</div>
<div class="p-3">
<button
class="btn"
@click="drawerVisible = true"
>
Категории
<ChevronDownIcon class="w-5"/>
</button>
</div>
<div class="grid grid-cols-1 gap-4 p-3 sm:grid-cols-2 md:grid-cols-3">
<ProductCard/>
<ProductCard/>
<ProductCard/>
<ProductCard/>
<ProductCard/>
</div>
<BottomDrawer v-model="drawerVisible">
<ul class="list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Категории</li>
<li class="list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
<div class="flex items-center">Dio Lupa</div>
</li>
<li class="list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
<div class="flex items-center">Dio Lupa</div>
</li>
<li class="list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
<div class="flex items-center">Dio Lupa</div>
</li>
<li class="list-row">
<div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
<div class="flex items-center">Dio Lupa</div>
</li>
</ul>
</BottomDrawer>
<ProductList/>
</template>
<script setup>
import ProductCard from "./components/ProductCard.vue";
import { ChevronDownIcon } from '@heroicons/vue/24/outline';
import BottomDrawer from "./components/BottomDrawer.vue";
import {ref} from "vue";
const drawerVisible = ref(false);
import ProductList from "./components/ProductList.vue";
</script>
<style scoped>
</style>

10
spa/src/components/ProductCard.vue
View File

@@ -1,8 +1,10 @@
<template>
<div class="bg-white rounded-lg shadow p-3">
<img src="https://placehold.co/300x300" alt="Футболка" class="w-full h-auto rounded-md mb-2" />
<h2 class="font-semibold text-base">Базовая футболка</h2>
<p class="text-sm text-gray-500">RUB 6,000</p>
<div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
<a v-for="product in products" :key="product.id" :href="product.href" class="group">
<img :src="product.imageSrc" :alt="product.imageAlt" class="aspect-square w-full rounded-lg bg-gray-200 object-cover group-hover:opacity-75 xl:aspect-7/8" />
<h3 class="mt-4 text-sm text-gray-700">{{ product.name }}</h3>
<p class="mt-1 text-lg font-medium text-gray-900">{{ product.price }}</p>
</a>
</div>
</template>

28
spa/src/components/ProductList.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<div class="bg-white">
<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-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
<a v-for="product in products" :key="product.id" class="group">
<img :src="product.image" :alt="product.name"
class="aspect-square w-full rounded-lg bg-gray-200 object-cover group-hover:opacity-75 xl:aspect-7/8"/>
<h3 class="mt-4 text-sm text-gray-700">{{ product.name }}</h3>
<p class="mt-1 text-lg font-medium text-gray-900">{{ product.price }}</p>
</a>
</div>
</div>
</div>
</template>
<script setup>
import {$fetch} from 'ofetch';
import {onMounted, ref} from "vue";
const products = ref([]);
onMounted(async () => {
const {data} = await $fetch('http://localhost:8000/index.php?route=tgshop/handle&api_action=products');
products.value = data;
});
</script>