91 lines
4.0 KiB
Vue
91 lines
4.0 KiB
Vue
<template>
|
||
<section class="shop__area pt-100 pb-100">
|
||
<div class="container">
|
||
<div class="row">
|
||
|
||
<div class="col-xl-8 offset-xl-2 col-lg-8 offset-lg-2">
|
||
<div class="shop__content-area">
|
||
<div class="shop__header d-sm-flex justify-content-between align-items-center mb-40">
|
||
<div class="shop__header-left">
|
||
<div class="show-text">
|
||
<span>Showing 1–{{state.products.slice(pageStart, pageStart + countOfPage).length}} of {{state.products.length}} results</span>
|
||
</div>
|
||
</div>
|
||
<div class="shop__header-right d-flex align-items-center justify-content-between justify-content-sm-end">
|
||
<!-- sort-filtering -->
|
||
<sort-filtering/>
|
||
<!-- sort-filtering -->
|
||
<ul class="nav nav-pills" id="pills-tab" role="tablist">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" id="pills-grid-tab" data-bs-toggle="pill" href="#pills-grid" role="tab" aria-controls="pills-grid" aria-selected="true"><i class="fas fa-th"></i></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" id="pills-list-tab" data-bs-toggle="pill" href="#pills-list" role="tab" aria-controls="pills-list" aria-selected="false"><i class="fas fa-list-ul"></i></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="tab-content" id="pills-tabContent">
|
||
<div class="tab-pane fade show active" id="pills-grid" role="tabpanel" aria-labelledby="pills-grid-tab">
|
||
<div class="row custom-row-10">
|
||
|
||
<div v-for="(item,i) in state.filterProducts.slice(pageStart, pageStart + countOfPage)" :key="i" class="col-xl-4 col-lg-4 col-md-6 col-sm-6 custom-col-10">
|
||
<product-item :item="item"/>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane fade" id="pills-list" role="tabpanel" aria-labelledby="pills-list-tab">
|
||
|
||
<product-list-item v-for="(item,i) in state.filterProducts.slice(pageStart, pageStart + countOfPage)" :key="i" :item="item"/>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row mt-40">
|
||
<div class="col-xl-12">
|
||
<pagination
|
||
:items="state.products"
|
||
:count-of-page="9"
|
||
@paginatedData="paginatedData"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent } from 'vue';
|
||
import SortFiltering from './filter-widget/SortFiltering.vue';
|
||
import { useProductsStore } from '~~/store/useProducts';
|
||
import ProductItem from '../products/ProductItem.vue';
|
||
import ProductListItem from '../products/ProductListItem.vue';
|
||
import Pagination from '~~/ui/Pagination.vue';
|
||
|
||
export default defineComponent({
|
||
components: { SortFiltering, ProductItem, ProductListItem,Pagination },
|
||
data() {
|
||
return {
|
||
filteredRows: [],
|
||
pageStart: 0 as number,
|
||
countOfPage: 9 as number
|
||
}
|
||
},
|
||
methods: {
|
||
paginatedData(filteredRows:[], pageStart:number, countOfPage:number) {
|
||
this.filteredRows = filteredRows;
|
||
this.pageStart = pageStart;
|
||
this.countOfPage = countOfPage;
|
||
}
|
||
},
|
||
setup () {
|
||
const state = useProductsStore();
|
||
return {state}
|
||
}
|
||
})
|
||
</script>
|
||
|