107 lines
3.7 KiB
Vue
Executable File
107 lines
3.7 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 p-5">
|
|
<div class="mb-4 flex items-center text-gray-light text-lg font-medium">
|
|
<inertia-link :href="route('setting.purchases')" class="block hover:underline">
|
|
Вернуться
|
|
</inertia-link>
|
|
<span class="px-3">/</span>
|
|
<h1 class="text-gray">
|
|
Скачать медиа контент
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="my-8 flex items-center justify-between">
|
|
<inertia-link :href="route('profile.user', seller.username)" class="flex items-center">
|
|
<div class="flex-shrink-0 block mr-2 md:mr-4">
|
|
<user-avatar :user="seller" size="small"
|
|
class="w-10 h-10 md:w-16 md:h-16 text-lg"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-sm md:text-base block font-medium text-white">{{ seller.name }}</span>
|
|
<span class="text-xs text-gray-light">продавец</span>
|
|
</div>
|
|
</inertia-link>
|
|
|
|
<div class="text-right">
|
|
<p class="mt-2 text-gray-light text-sm">
|
|
Цена: {{ purchase.price }}
|
|
</p>
|
|
<p class="mt-2 text-gray-light text-sm">
|
|
Дата покупки: {{ purchase.purchase_date }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div v-if="purchase.title" class="text-lg text-gray font-semibold">
|
|
{{ purchase.title }}
|
|
</div>
|
|
<div v-if="purchase.body" class="text-lg mt-4 text-gray-light"
|
|
v-html="purchase.body"
|
|
></div>
|
|
|
|
<div class="mt-4">
|
|
<component
|
|
:is="currentTypeNode"
|
|
:purchase="purchase"
|
|
></component>
|
|
</div>
|
|
|
|
<div class="mt-12 flex -mx-3 -my-1 flex-wrap">
|
|
<a :href="route('download.purchases', purchase.id)" class="mx-3 my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-orange focus:outline-none">
|
|
Скачать архив
|
|
</a>
|
|
<inertia-link :href="route('setting.purchases')"
|
|
class="mx-3 my-1 transition shadow-none hover:shadow-classic inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-indigo-300 focus:outline-none"
|
|
>
|
|
Вернуться
|
|
</inertia-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Layout from '@/Shared/Layout.vue'
|
|
import MetaHead from '@/Shared/MetaHead.vue'
|
|
import PurchaseImages from '@/Shared/Purchase/PurchaseImages.vue'
|
|
import PurchaseMusics from '@/Shared/Purchase/PurchaseMusics.vue'
|
|
import PurchaseVideos from '@/Shared/Purchase/PurchaseVideos.vue'
|
|
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
|
|
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
|
|
|
|
export default {
|
|
components: {
|
|
MetaHead,
|
|
PurchaseImages,
|
|
PurchaseMusics,
|
|
PurchaseVideos,
|
|
SettingsMenu,
|
|
UserAvatar,
|
|
},
|
|
layout: Layout,
|
|
|
|
props: {
|
|
purchase: Object,
|
|
seller: Object,
|
|
},
|
|
|
|
computed: {
|
|
currentTypeNode() {
|
|
return 'purchase-' + this.purchase.type
|
|
},
|
|
},
|
|
}
|
|
</script>
|