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

feat: design update, show avatar in navbar

Browse Source
This commit is contained in:
Nikita Kiselev
2025-11-16 12:43:52 +03:00
parent f5d9d417b3
commit 6ac6a42e21
20 changed files with 190 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/spa/src/App.vue
View File

@@ -3,7 +3,7 @@
<input id="app-drawer" type="checkbox" class="drawer-toggle" v-model="drawerOpen"/>
<div class="drawer-content">
<div class="app-container h-full">
<div class="app-container">
<header class="app-header bg-neutral text-neutral-content w-full" v-if="platform === 'ios'"></header>
<section class="telecart-main-section">

35
frontend/spa/src/components/MainPage/Blocks/BaseBlock.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<section class="px-4">
<header class="flex justify-between items-center mb-4">
<div>
<div v-if="title" class="font-bold uppercase">{{ title }}</div>
<div v-if="description" class="text-sm">{{ description }}</div>
</div>
<div v-if="moreLink">
<RouterLink :to="moreLink" class="btn btn-ghost btn-xs" @click="haptic.selectionChanged">
{{ moreText || 'Смотреть всё' }}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</RouterLink>
</div>
</header>
<main>
<slot></slot>
</main>
</section>
</template>
<script setup>
import {useHapticFeedback} from "@/composables/useHapticFeedback.js";
const props = defineProps({
title: String,
description: String,
moreLink: [String, Object],
moreText: String,
});
const haptic = useHapticFeedback();
</script>

72
frontend/spa/src/components/MainPage/Blocks/ProductsCarouselBlock.vue
View File

@@ -1,51 +1,32 @@
<template>
<section class="px-4">
<header class="flex justify-between items-center mb-2">
<div>
<div v-if="block.title" class="font-bold uppercase">{{ block.title }}</div>
<div v-if="block.description" class="text-sm">{{ block.description }}</div>
</div>
<div>
<BaseBlock
:title="block.title"
:description="block.description"
:moreLink="{name: 'product.categories.show', params: { category_id: block.data.category_id }}"
:moreText="block.data.all_text"
>
<Swiper
class="select-none"
:slides-per-view="block.data?.carousel?.slides_per_view || 2.5"
:space-between="block.data?.carousel?.space_between || 20"
:autoplay="block.data?.carousel?.autoplay || false"
:freeMode="freeModeSettings"
:lazy="true"
@sliderMove="hapticScroll"
>
<SwiperSlide v-for="product in block.data.products.data" :key="product.id">
<RouterLink
:to="{name: 'product.categories.show',
params: { category_id: block.data.category_id }}"
class="btn btn-ghost btn-xs"
:to="{name: 'product.show', params: {id: product.id}}"
@click="slideClick(product)"
>
{{ block.data.all_text || 'Смотреть всё' }}
<div class="text-center">
<img :src="product.images[0].url" :alt="product.name" loading="lazy" class="product-image"/>
<PriceTitle :product="product"/>
</div>
</RouterLink>
</div>
</header>
<main>
<Swiper
class="select-none"
:slides-per-view="block.data?.carousel?.slides_per_view || 2.5"
:space-between="block.data?.carousel?.space_between || 20"
:autoplay="block.data?.carousel?.autoplay || false"
:freeMode="freeModeSettings"
:lazy="true"
@sliderMove="hapticScroll"
>
<SwiperSlide v-for="product in block.data.products.data" :key="product.id">
<RouterLink
:to="{name: 'product.show', params: {id: product.id}}"
@click="slideClick(product)"
>
<div class="text-center">
<img :src="product.images[0].url" :alt="product.name" loading="lazy" class="product-image"/>
<ProductTitle :title="product.name"/>
<div v-if="product.special" class="mt-1">
<span class="text-xs line-through mr-2">{{ product.price }}</span>
<span class="text-base font-medium">{{ product.special }}</span>
</div>
<p v-else class="font-medium">{{ product.price }}</p>
</div>
</RouterLink>
</SwiperSlide>
</Swiper>
</main>
</section>
</SwiperSlide>
</Swiper>
</BaseBlock>
</template>
<script setup>
@@ -53,6 +34,9 @@ import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
import {Swiper, SwiperSlide} from "swiper/vue";
import ProductTitle from "@/components/ProductItem/ProductTitle.vue";
import {useHapticScroll} from "@/composables/useHapticScroll.js";
import Price from "@/components/ProductItem/Price.vue";
import BaseBlock from "@/components/MainPage/Blocks/BaseBlock.vue";
import PriceTitle from "@/components/ProductItem/PriceTitle.vue";
const hapticScroll = useHapticScroll(20, 'selectionChanged');
const yaMetrika = useYaMetrikaStore();

2
frontend/spa/src/components/MainPage/Blocks/ProductsFeedBlock.vue
View File

@@ -1,6 +1,6 @@
<template>
<section class="px-4">
<header class="mb-2">
<header class="mb-4">
<div v-if="block.title" class="font-bold uppercase">{{ block.title }}</div>
<div v-if="block.description" class="text-sm">{{ block.description }}</div>
</header>

4
frontend/spa/src/components/MainPage/Blocks/SliderBlock.vue
View File

@@ -1,6 +1,6 @@
<template>
<section>
<header>
<section class="mainpage-block">
<header class="mainpage-block__header">
<div v-if="block.title" class="font-bold uppercase text-center">{{ block.title }}</div>
<div v-if="block.description" class="text-sm text-center mb-2">{{ block.description }}</div>
</header>

22
frontend/spa/src/components/Navbar.vue
View File

@@ -21,12 +21,19 @@
</div>
<div class="navbar-end">
<button v-if="false" class="btn btn-ghost btn-circle">
<div class="indicator">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg>
<span class="badge badge-xs badge-secondary indicator-item">1</span>
<div v-if="tgData?.user?.photo_url" class="avatar">
<div class="w-8 h-8 rounded-full">
<img :src="tgData?.user?.photo_url" alt="avatar"/>
</div>
</button>
</div>
<div v-else class="avatar avatar-placeholder">
<div class="bg-primary text-primary-content w-8 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
</svg>
</div>
</div>
</div>
</div>
</template>
@@ -35,13 +42,12 @@
import {useSettingsStore} from "@/stores/SettingsStore.js";
import {useMiniApp} from "vue-tg";
import {ref} from "vue";
import {useTgData} from "@/composables/useTgData.js";
const settings = useSettingsStore();
const emits = defineEmits(['drawer']);
const tg = useMiniApp();
const platform = ref();
platform.value = tg.platform;
const tgData = useTgData();
function toggleDrawer() {
emits('drawer');

24
frontend/spa/src/components/ProductItem/Price.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<div v-if="special">
<span class="old-price text-stone-500 line-through mr-1">{{ price }}</span>
<span class="curr-price font-medium">{{ special }}</span>
</div>
<div v-else class="font-medium">{{ price }}</div>
</template>
<script setup>
const props = defineProps({
price: String,
special: [String, Boolean],
});
</script>
<style scoped>
.old-price {
font-size: 0.65rem;
}
.curr-price {
font-size: .9rem;
}
</style>

15
frontend/spa/src/components/ProductItem/PriceTitle.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="mt-2 text-center space-y-0.5">
<Price :price="product.price" :special="product.special"/>
<ProductTitle :title="product.name"/>
</div>
</template>
<script setup>
import ProductTitle from "@/components/ProductItem/ProductTitle.vue";
import Price from "@/components/ProductItem/Price.vue";
const props = defineProps({
product: Object,
});
</script>

2
frontend/spa/src/components/ProductItem/ProductTitle.vue
View File

@@ -1,5 +1,5 @@
<template>
<h3 class="product-title mt-4 text-sm">{{ title }}</h3>
<h3 class="product-title text-sm/4">{{ title }}</h3>
</template>
<script setup>

13
frontend/spa/src/components/ProductsList.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div>
<h2 v-if="categoryName" class="text-lg font-bold mb-5 text-center">{{ categoryName }}</h2>
<h2 v-if="categoryName" class="text-lg font-bold mb-5">{{ categoryName }}</h2>
<template v-if="products.length > 0">
<div
@@ -15,14 +15,7 @@
@click="productClick(product, index)"
>
<ProductImageSwiper :images="product.images"/>
<ProductTitle :title="product.name"/>
<div v-if="product.special" class="mt-1">
<p class="text-xs line-through mr-2">{{ product.price }}</p>
<p class="text-lg font-medium">{{ product.special }}</p>
</div>
<p v-else class="mt-1 text-lg font-medium">{{ product.price }}</p>
<PriceTitle :product="product"/>
</RouterLink>
<div ref="bottom" style="height: 1px;"></div>
</div>
@@ -75,6 +68,8 @@ import IconFunnel from "@/components/Icons/IconFunnel.vue";
import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
import {useRouter} from "vue-router";
import ProductTitle from "@/components/ProductItem/ProductTitle.vue";
import Price from "@/components/ProductItem/Price.vue";
import PriceTitle from "@/components/ProductItem/PriceTitle.vue";
const router = useRouter();
const haptic = window.Telegram.WebApp.HapticFeedback;

3
frontend/spa/src/composables/useHapticFeedback.js Normal file
View File

@@ -0,0 +1,3 @@
export function useHapticFeedback() {
return window.Telegram?.WebApp?.HapticFeedback;
}

2
frontend/spa/src/composables/useHapticScroll.js
View File

@@ -32,4 +32,4 @@ export function useHapticScroll(
lastTranslate.value = current;
}
};
}
}

3
frontend/spa/src/composables/useTgData.js Normal file
View File

@@ -0,0 +1,3 @@
export function useTgData() {
return window.Telegram?.WebApp?.initDataUnsafe;
}

7
frontend/spa/src/router.js
View File

@@ -34,6 +34,13 @@ const routes = [
export const router = createRouter({
history: createWebHashHistory('/image/catalog/tgshopspa/'),
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
}
return {top: 0, behavior: 'smooth'};
},
});
router.beforeEach((to, from, next) => {

7
frontend/spa/src/style.css
View File

@@ -12,9 +12,6 @@ html, body, #app {
--swiper-pagination-bullet-size: 6px;
--swiper-pagination-color: #777;
--swiper-pagination-bottom: -5px;
}
html {
--product_list_title_max_lines: 2;
--tc-navbar-min-height: 3rem;
}
@@ -68,7 +65,3 @@ html {
/*+ 1rem*/
);
}
.swiper-pagination-bullets {
top: 10px;
}

14
frontend/spa/src/views/BaseViewWrapper.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<main class="px-4 mt-4">
<header v-if="title" class="font-bold uppercase mb-4">{{ title }}</header>
<section>
<slot></slot>
</section>
</main>
</template>
<script setup>
const props = defineProps({
title: String,
});
</script>

14
frontend/spa/src/views/Cart.vue
View File

@@ -1,10 +1,5 @@
<template>
<div class="max-w-3xl mx-auto p-4 space-y-6 pb-40">
<h2 class="text-2xl text-center">
Корзина
<span v-if="cart.isLoading" class="loading loading-spinner loading-md"></span>
</h2>
<BaseViewWrapper title="Корзина">
<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" />
@@ -19,7 +14,7 @@
<span>{{ cart.error_warning }}</span>
</div>
<div v-if="cart.items.length > 0">
<div v-if="cart.items.length > 0" class="pb-10">
<div
v-for="(item, index) in cart.items"
:key="item.cart_id"
@@ -28,7 +23,7 @@
>
<div class="card-body">
<div class="flex">
<div class="avatar mr-5">
<div class="mr-2">
<div class="w-16 rounded">
<img :src="item.thumb"/>
</div>
@@ -128,7 +123,7 @@
<p class="text-lg mb-3">{{ settings.texts.text_empty_cart }}</p>
<RouterLink class="btn btn-primary" to="/">Начать покупки</RouterLink>
</div>
</div>
</BaseViewWrapper>
</template>
<script setup>
@@ -143,6 +138,7 @@ import {useRoute, useRouter} from "vue-router";
import {useSettingsStore} from "@/stores/SettingsStore.js";
import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
import BaseViewWrapper from "@/views/BaseViewWrapper.vue";
const route = useRoute();
const yaMetrika = useYaMetrikaStore();

7
frontend/spa/src/views/CategoriesList.vue
View File

@@ -1,7 +1,5 @@
<template>
<div class="px-4 mt-4">
<h2 class="font-bold uppercase mb-4">Категории</h2>
<BaseViewWrapper title="Категории">
<div v-if="categoriesStore.isLoading" class="flex flex-col gap-4">
<div class="skeleton h-14 w-full"></div>
<div class="skeleton h-14 w-full"></div>
@@ -51,7 +49,7 @@
</li>
</TransitionGroup>
</template>
</div>
</BaseViewWrapper>
</template>
<script setup>
@@ -61,6 +59,7 @@ import {useCategoriesStore} from "@/stores/CategoriesStore.js";
import {useRoute} from "vue-router";
import CategoryItem from "@/components/CategoriesList/CategoryItem.vue";
import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
import BaseViewWrapper from "@/views/BaseViewWrapper.vue";
const route = useRoute();
const categoriesStore = useCategoriesStore();

2
frontend/spa/src/views/Home.vue
View File

@@ -1,5 +1,5 @@
<template>
<div ref="goodsRef" class="space-y-4 mt-4">
<div ref="goodsRef" class="space-y-8 mt-4">
<MainPage/>
</div>
</template>

58
frontend/spa/src/views/Search.vue
View File

@@ -1,32 +1,28 @@
<template>
<div class="max-w-3xl mx-auto p-4 space-y-6 pb-20">
<h2 class="text-2xl mb-5 text-center">Поиск</h2>
<div class="w-full">
<label class="input w-full">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2.5"
fill="none"
stroke="currentColor"
>
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.3-4.3"></path>
</g>
</svg>
<input
ref="searchInput"
type="search"
class="grow input-lg"
placeholder="Поиск по магазину"
v-model="searchStore.search"
@search="debouncedSearch"
@input="debouncedSearch"
/>
</label>
</div>
<BaseViewWrapper title="Поиск">
<label class="input w-full mb-4">
<svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2.5"
fill="none"
stroke="currentColor"
>
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.3-4.3"></path>
</g>
</svg>
<input
ref="searchInput"
type="search"
class="grow input-lg"
placeholder="Поиск по магазину"
v-model="searchStore.search"
@search="debouncedSearch"
@input="debouncedSearch"
/>
</label>
<div v-if="searchStore.isLoading === false && searchStore.products.data.length > 0">
<RouterLink
@@ -43,7 +39,7 @@
<div class="ml-5 p-0">
<h2 class="card-title">{{ product.name }}</h2>
<p>{{ product.price }}</p>
<Price :price="product.price" :special="product.special"/>
</div>
</RouterLink>
</div>
@@ -67,7 +63,7 @@
<h2 class="text-xl font-semibold mb-2">Товары не найдены</h2>
<p class="text-sm mb-4">Попробуйте изменить или уточнить запрос</p>
</div>
</div>
</BaseViewWrapper>
</template>
<script setup>
@@ -77,6 +73,8 @@ import {onMounted, ref} from "vue";
import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
import {useRoute} from "vue-router";
import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
import BaseViewWrapper from "@/views/BaseViewWrapper.vue";
import Price from "@/components/ProductItem/Price.vue";
const route = useRoute();
const yaMetrika = useYaMetrikaStore();