feat: add pages
This commit is contained in:
parent
2767047ada
commit
dd0bf57f6b
@ -14,6 +14,7 @@
|
||||
"@formkit/auto-animate": "^0.8.2",
|
||||
"axios": "^1.7.9",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "4",
|
||||
"vue3-toastify": "^0.2.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
44
src/App.vue
44
src/App.vue
@ -1,10 +1,8 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, provide, reactive, ref, watch } from 'vue'
|
||||
import Header from '@/components/Header.vue'
|
||||
import CardList from '@/components/CardList.vue'
|
||||
import Drawer from '@/components/Drawer.vue'
|
||||
import axios from 'axios'
|
||||
import Spinner from '@/components/Spinner.vue'
|
||||
import { toast } from 'vue3-toastify'
|
||||
import 'vue3-toastify/dist/index.css';
|
||||
const showDrawer = ref(false);
|
||||
@ -150,39 +148,17 @@
|
||||
<Header />
|
||||
|
||||
<div class="p-10">
|
||||
<div class="flex justify-between items-center mb-8">
|
||||
<h2 class="text-3xl font-bold">Все кроссовки</h2>
|
||||
|
||||
<div class="flex gap-4 flex-wrap">
|
||||
<select class="py-2 px-3 border rounded-md outline-none" v-model="filters.sortBy">
|
||||
<option value="" disabled>Сортировка по:</option>
|
||||
<option value="title">По названию</option>
|
||||
<option value="price">По цене (сначала дешевые)</option>
|
||||
<option value="-price">По цене (сначала дорогие)</option>
|
||||
</select>
|
||||
|
||||
<div class="relative">
|
||||
<img class="absolute top-3 left-4" src="/search.svg" alt="Search">
|
||||
<input v-model="filters.searchQuery" class="border rounded-md py-2 pl-11 pr-4 outline-none focus:border-gray-400" type="text" placeholder="Поиск">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="isLoading" class="flex justify-center align-center">
|
||||
<Spinner/>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<CardList
|
||||
v-if="items.length > 0"
|
||||
<router-view v-slot="{ Component }">
|
||||
<component
|
||||
:is="Component"
|
||||
:items="items"
|
||||
@toggle-to-favorite="toggleToFavorite"
|
||||
@toggle-to-cart="toggleToCart"
|
||||
/>
|
||||
<h2 v-else>Пусто</h2>
|
||||
</div>
|
||||
|
||||
:isLoading="isLoading"
|
||||
:filters="filters"
|
||||
:toggleToFavorite="toggleToFavorite"
|
||||
:toggleToCart="toggleToCart"
|
||||
>
|
||||
</component>
|
||||
</router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -9,14 +9,15 @@
|
||||
|
||||
<template>
|
||||
<header class="flex justify-between border-b border-slate-100 px-11 py-10">
|
||||
<router-link to="/">
|
||||
<div class="flex items-center gap-4">
|
||||
<img src="/logo.png" alt="Logo" class="w-10" />
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-bold uppercase">Vue Sneakers</h2>
|
||||
<p class="text-slate-500">Магазин лучших кроссовок</p>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<ul class="flex items-center gap-8">
|
||||
<li
|
||||
@ -27,11 +28,13 @@
|
||||
<b> {{ decimalFormatter.format(totalPrice)}} </b>
|
||||
</li>
|
||||
|
||||
<router-link to="/favorites">
|
||||
<li class="flex items-center gap-2 text-gray-500 hover:text-black cursor-pointer">
|
||||
<img src="/heart.svg" alt="Heart" />
|
||||
|
||||
<span>Закладки</span>
|
||||
</li>
|
||||
</router-link>
|
||||
|
||||
<li class="flex items-center gap-2 text-gray-500 hover:text-black cursor-pointer">
|
||||
<img src="/profile.svg" alt="Profile" />
|
||||
|
||||
14
src/main.js
14
src/main.js
@ -3,8 +3,22 @@ import './assets/main.css'
|
||||
import App from './App.vue'
|
||||
import Vue3Toastify from 'vue3-toastify';
|
||||
import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import Home from '@/pages/Home.vue'
|
||||
import Favorites from '@/pages/Favorites.vue'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', name: 'Home', component: Home },
|
||||
{ path: '/favorites', name: 'favorites', component: Favorites },
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(router);
|
||||
app.use(Vue3Toastify, { autoClose: 1000 });
|
||||
app.use(autoAnimatePlugin);
|
||||
app.mount('#app')
|
||||
|
||||
31
src/pages/Favorites.vue
Normal file
31
src/pages/Favorites.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import Spinner from '@/components/Spinner.vue'
|
||||
import CardList from '@/components/CardList.vue'
|
||||
|
||||
const props = defineProps({
|
||||
filters: Object,
|
||||
isLoading: Boolean,
|
||||
items: Array,
|
||||
toggleToFavorite: Function,
|
||||
toggleToCart: Function,
|
||||
})
|
||||
|
||||
const favorites = computed(() => props.items.filter(item => item.isFavorite))
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div v-if="isLoading" class="flex justify-center align-center">
|
||||
<Spinner/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<CardList
|
||||
v-if="favorites.length > 0"
|
||||
:items="favorites"
|
||||
@toggle-to-favorite="toggleToFavorite"
|
||||
@toggle-to-cart="toggleToCart"
|
||||
/>
|
||||
<h2 v-else>Пусто</h2>
|
||||
</div>
|
||||
</template>
|
||||
49
src/pages/Home.vue
Normal file
49
src/pages/Home.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<script setup>
|
||||
import CardList from '@/components/CardList.vue'
|
||||
import Spinner from '@/components/Spinner.vue'
|
||||
|
||||
defineProps({
|
||||
filters: Object,
|
||||
isLoading: Boolean,
|
||||
items: Array,
|
||||
toggleToFavorite: Function,
|
||||
toggleToCart: Function,
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="flex justify-between items-center mb-8">
|
||||
<h2 class="text-3xl font-bold">Все кроссовки</h2>
|
||||
|
||||
<div class="flex gap-4 flex-wrap">
|
||||
<select class="py-2 px-3 border rounded-md outline-none" v-model="filters.sortBy">
|
||||
<option value="" disabled>Сортировка по:</option>
|
||||
<option value="title">По названию</option>
|
||||
<option value="price">По цене (сначала дешевые)</option>
|
||||
<option value="-price">По цене (сначала дорогие)</option>
|
||||
</select>
|
||||
|
||||
<div class="relative">
|
||||
<img class="absolute top-3 left-4" src="/search.svg" alt="Search">
|
||||
<input v-model="filters.searchQuery" class="border rounded-md py-2 pl-11 pr-4 outline-none focus:border-gray-400" type="text" placeholder="Поиск">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="isLoading" class="flex justify-center align-center">
|
||||
<Spinner/>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<CardList
|
||||
v-if="items.length > 0"
|
||||
:items="items"
|
||||
@toggle-to-favorite="toggleToFavorite"
|
||||
@toggle-to-cart="toggleToCart"
|
||||
/>
|
||||
<h2 v-else>Пусто</h2>
|
||||
</div>
|
||||
</template>
|
||||
19
yarn.lock
19
yarn.lock
@ -1085,6 +1085,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@vue/devtools-api@npm:^6.6.4":
|
||||
version: 6.6.4
|
||||
resolution: "@vue/devtools-api@npm:6.6.4"
|
||||
checksum: 10c0/0a993ae23618166e1bee5a7c14cebd8312752b93c143cbdd48fb2d0f7ade070d0e6baf757cd920d4681fef8f9acf29515162160f38cc7410f9a684d2df21b6de
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@vue/devtools-core@npm:^7.7.0":
|
||||
version: 7.7.0
|
||||
resolution: "@vue/devtools-core@npm:7.7.0"
|
||||
@ -1298,6 +1305,7 @@ __metadata:
|
||||
vite: "npm:^6.0.5"
|
||||
vite-plugin-vue-devtools: "npm:^7.6.8"
|
||||
vue: "npm:^3.5.13"
|
||||
vue-router: "npm:4"
|
||||
vue3-toastify: "npm:^0.2.8"
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
@ -4119,6 +4127,17 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"vue-router@npm:4":
|
||||
version: 4.5.0
|
||||
resolution: "vue-router@npm:4.5.0"
|
||||
dependencies:
|
||||
"@vue/devtools-api": "npm:^6.6.4"
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
checksum: 10c0/5521c8d0ab7634ea75118824d4b4cae3748964725b3d3b4064eb3dbd44013381ea3163d4d856af61655936cd897b84f8eeebb312d0668532c3074d53814bd953
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"vue3-toastify@npm:^0.2.8":
|
||||
version: 0.2.8
|
||||
resolution: "vue3-toastify@npm:0.2.8"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user