nikitakiselev/interview-demo-code
1
0
Fork 0
Code Issues Pull Requests Actions 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

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;