Последняя версия с сервера прошлого разработчика

resources/js/Shared/Purchase/PurchaseImages.vue

@@ -0,0 +1,38 @@
+<template>
+<section>
+    <h2 class="text-base text-gray font-semibold">Превью:</h2>
+     <div class="mt-3 grid grid-cols-2 sm:grid-cols-3  gap-2 lg:gap-4">
+        <div v-for="common_media in purchase.common_medias" :key="common_media.id">
+            <div data-fancybox="preview" :data-src="common_media.url" class="cursor-pointer">
+                <img :src="common_media.url" class="w-full h-36 md:h-72 object-cover" alt="">
+            </div>
+            <a :href="common_media.url" download class="hover:text-orange transition-colors mt-2 text-gray-light text-sm">Скачать</a>
+        </div>
+     </div>
+</section>
+
+<section class="mt-6">
+    <h2 class="text-base text-gray font-semibold">Медиа материалы:</h2>
+     <div class="mt-3 grid grid-cols-2 sm:grid-cols-3  gap-2 lg:gap-4">
+        <div v-for="paid_media in purchase.paid_medias" :key="paid_media.id">
+           <div data-fancybox="paid" :data-src="paid_media.url" class="cursor-pointer">
+                <img :src="paid_media.url" class="w-full h-36 md:h-72 object-cover" alt="">
+           </div>
+            <a :href="paid_media.url" download class="hover:text-orange transition-colors mt-2 text-gray-light text-sm">Скачать</a>
+        </div>
+     </div>
+</section>
+
+</template>
+
+<script>
+import { Fancybox } from "@fancyapps/ui/src/Fancybox/Fancybox.js";
+import "@fancyapps/ui/dist/fancybox.css";
+
+export default {
+  components: {},
+  props: {
+    purchase: Object,
+  },
+};
+</script>