97 lines
2.9 KiB
Vue
Executable File
97 lines
2.9 KiB
Vue
Executable File
<template>
|
|
<meta-head title="Покупки"></meta-head>
|
|
|
|
<div class="xl:container xl:mx-auto px-2 md:px-3">
|
|
<div class="mt-16 shadow-classic rounded-md bg-indigo-200">
|
|
<div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
|
|
<settings-menu />
|
|
|
|
<div class="col-span-4">
|
|
<div v-if="feedLists.length" class="m-4 lg:m-8 grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-2 lg:gap-4">
|
|
<InfinityScroll :node-element="lastNodeLement" :next-cursor="nextCursor"
|
|
@fromPagination="putFromPagination"
|
|
>
|
|
<div v-for="feed in feedLists" :key="feed.id"
|
|
:ref="el => { if (el && feed.id === lastElementID) lastNodeLement = el }"
|
|
>
|
|
<inertia-link :href="route('setting.show.purchases', feed.id)" class="block contain relative overflow-hidden">
|
|
<feed-header-misc :count="1" :type="feed.type" />
|
|
<div>
|
|
<feed-preview class="w-full h-36 md:h-72 object-cover" :type="feed.type"
|
|
:source="feed.preview"
|
|
/>
|
|
</div>
|
|
<p class="mt-2 text-gray-light text-sm">
|
|
Цена: {{ feed.price }}
|
|
</p>
|
|
<p class="mt-2 text-gray-light text-sm">
|
|
Дата покупки: {{ feed.purchase_date }}
|
|
</p>
|
|
</inertia-link>
|
|
</div>
|
|
</InfinityScroll>
|
|
</div>
|
|
<div v-else class="m-4 lg:m-8 text-lg text-gray-light">
|
|
Вы еще не совершали покупки
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from 'vue'
|
|
|
|
import Layout from '@/Shared/Layout.vue'
|
|
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
|
|
import MetaHead from '@/Shared/MetaHead.vue'
|
|
import FeedHeaderMisc from '@/Shared/Feed/HeaderMisc.vue'
|
|
import FeedPreview from '@/Shared/Feed/FeedPreview.vue'
|
|
import InfinityScroll from '@/Shared/Misc/InfinityScroll.vue'
|
|
|
|
export default {
|
|
components: {
|
|
MetaHead,
|
|
SettingsMenu,
|
|
FeedHeaderMisc,
|
|
FeedPreview,
|
|
InfinityScroll,
|
|
},
|
|
layout: Layout,
|
|
props: {
|
|
nextCursor: String,
|
|
feeds: Array,
|
|
},
|
|
|
|
setup() {
|
|
const containerRef = ref(null)
|
|
return {
|
|
lastNodeLement: containerRef,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
feedLists: [],
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
lastElementID() {
|
|
return this.feedLists[this.feedLists.length - 1]?.id
|
|
},
|
|
},
|
|
mounted() {
|
|
this.feedLists = this.feeds
|
|
},
|
|
|
|
methods: {
|
|
putFromPagination(lists) {
|
|
for (let list of lists) {
|
|
this.feedLists.push(list)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|