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

feat: add telegram api

Browse Source
This commit is contained in:
Nikita Kiselev
2025-07-10 23:14:09 +03:00
parent ca6275fb7e
commit b958feaec7
3 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
spa/index.html
View File

@@ -1,13 +1,14 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<title>Vite + Vue</title> <title>Vite + Vue</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

8
spa/src/components/ProductList.vue
View File

@@ -4,7 +4,9 @@
<h2 class="sr-only">Products</h2> <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"> <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">
<a v-for="product in products" :key="product.id" class="group"> <a v-for="product in products" :key="product.id" class="group"
@touchstart="handleHaptic"
>
<img :src="product.image" :alt="product.name" <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"/> 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> <h3 class="mt-4 text-sm text-gray-700">{{ product.name }}</h3>
@@ -25,4 +27,8 @@ onMounted(async () => {
const {data} = await $fetch('https://ocstore.nikitakiselev.ru/index.php?route=extension/tgshop/handle&api_action=products'); const {data} = await $fetch('https://ocstore.nikitakiselev.ru/index.php?route=extension/tgshop/handle&api_action=products');
products.value = data; products.value = data;
}); });
function handleHaptic() {
window.Telegram?.WebApp?.HapticFeedback?.impactOccurred?.('heavy');
}
</script> </script>

4
spa/src/main.js
View File

@@ -3,3 +3,7 @@ import App from './App.vue'
import './style.css' import './style.css'
createApp(App).mount('#app') createApp(App).mount('#app')
const tg = window.Telegram.WebApp;
tg.ready();
tg.expand(); // на весь экран