Files
site/resources/js/Shared/FeedList/Images.vue

102 lines
2.6 KiB
Vue
Executable File

<template>
<div class="shadow-classic rounded-md bg-indigo-200 p-3 md:px-5 md:py-7">
<feed-header
:entity="entity"
:feed_id="feed_id"
:created_at="entity.created_at_humans"
:user="user"
@onRemoveFeed="onRemoveFeed"
/>
<div class="mt-3 md:mt-6 feed-body">
<div class="mb-3 md:mb-6 text-gray text-sm md:text-base">
<div @click.stop="">
<div v-if="entity.is_ads" class="prose-content"
v-html="entity.body"
>
</div>
<template v-else>
<feed-tags
v-if="entity.tags.length"
class="mb-1"
:tags="entity.tags"
/>
{{ entity.body }}
</template>
</div>
<feed-paid-block
:is_paid="entity.is_paid"
:user_id="user.id"
:price="entity.price"
:feed_id="feed_id"
:paid_open="entity.paid_open"
@onReplaceFeed="onReplaceFeed"
/>
</div>
<div
:class="[{
'grid-cols-2': countMediaContent > 1
}]"
class="grid gap-1 md:gap-3 md:grid-cols-[repeat(auto-fit,minmax(280px,1fr))]"
>
<div v-for="media in entity.collection_medias" :key="media.id">
<img class="w-full h-full object-cover" :src="media.url"
alt=""
/>
</div>
</div>
</div>
<feed-footer
:likes="entity.likes"
:liked="entity.liked"
:comments="entity.comments"
:count="entity.views_count"
:ads="entity.is_ads"
@likeFeed="likeFeed"
/>
</div>
</template>
<script>
import FeedHeader from '@/Shared/FeedList/FeedHeader.vue'
import FeedFooter from '@/Shared/FeedList/FeedFooter.vue'
import FeedPaidBlock from '@/Shared/FeedList/FeedPaidBlock.vue'
import FeedTags from '@/Shared/Misc/FeedTags.vue'
export default {
components: {
FeedHeader,
FeedFooter,
FeedPaidBlock,
FeedTags,
},
props: {
entity: Object,
user: Object,
feed_id: Number,
},
emits: ['likeFeed', 'onRemoveFeed'],
computed: {
countMediaContent() {
return this.entity.collection_medias.length
}
},
methods: {
onReplaceFeed(data) {
this.entity.collection_medias = data.collection
this.entity.preview = data.preview
this.entity.paid_open = 1
},
onRemoveFeed() {
this.$emit('onRemoveFeed', this.feed_id)
},
likeFeed() {
this.$emit('likeFeed')
},
},
}
</script>