feat: WIP
This commit is contained in:
Nikita Kiselev
30
spa/package-lock.json
generated
30
spa/package-lock.json
generated
@@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@heroicons/vue": "^2.2.0",
|
||||
"@tailwindcss/vite": "^4.1.11",
|
||||
"ofetch": "^1.4.1",
|
||||
"vue": "^3.5.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -1321,6 +1322,12 @@
|
||||
"url": "https://github.com/saadeghi/daisyui?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/destr": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/destr/-/destr-2.0.5.tgz",
|
||||
"integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
|
||||
@@ -1767,6 +1774,12 @@
|
||||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/node-fetch-native": {
|
||||
"version": "1.6.6",
|
||||
"resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.6.tgz",
|
||||
"integrity": "sha512-8Mc2HhqPdlIfedsuZoc3yioPuzp6b+L5jRCRY1QzuWZh2EGJVQrGppC6V6cF0bLdbW0+O2YpqCA25aF/1lvipQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/node-releases": {
|
||||
"version": "2.0.19",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
|
||||
@@ -1784,6 +1797,17 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ofetch": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.4.1.tgz",
|
||||
"integrity": "sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"destr": "^2.0.3",
|
||||
"node-fetch-native": "^1.6.4",
|
||||
"ufo": "^1.5.4"
|
||||
}
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
||||
@@ -1933,6 +1957,12 @@
|
||||
"url": "https://github.com/sponsors/SuperchupuDev"
|
||||
}
|
||||
},
|
||||
"node_modules/ufo": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
|
||||
"integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/update-browserslist-db": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
"dependencies": {
|
||||
"@heroicons/vue": "^2.2.0",
|
||||
"@tailwindcss/vite": "^4.1.11",
|
||||
"ofetch": "^1.4.1",
|
||||
"vue": "^3.5.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
28
spa/src/components/ProductList.vue
Normal 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>
|
||||
@@ -4,4 +4,12 @@ import vue from "@vitejs/plugin-vue";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [tailwindcss(), vue()],
|
||||
});
|
||||
|
||||
base: '/telegram_shop_spa/',
|
||||
build: {
|
||||
outDir: '../module/oc_telegram_shop/upload/image/catalog/tgshopspa',
|
||||
emptyOutDir: true,
|
||||
sourcemap: true,
|
||||
manifest: true,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user