extended

src/views/DetailsView.vue

@@ -1,11 +1,54 @@
-<script setup lang="ts">
+<script setup>
+import { apiClient } from '@/services/apiClient.js'
+import { onMounted, ref } from 'vue'
 
+const props = defineProps({
+  merch_uuid: {
+    type: String,
+    required: true
+  }
+})
+
+const merchDetails = ref(null)
+const loading = ref(true)
+const error = ref(null)
+
+const fetchMerch = async () => {
+  try {
+    const response = await apiClient.get(`/merch/${props.merch_uuid}`)
+    if (!response.ok) throw new Error('Network response was not ok')
+    merchDetails.value = response.data
+  } catch (err) {
+    error.value = err.message
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchMerch()
+})
 </script>
 
 <template>
-Merch details view
+  <div v-if="loading">Loading...</div>
+  <div v-else-if="error">Error: {{ error }}</div>
+  <n-card v-else-if="merchDetails" :title="merchDetails.name">
+    <n-divider title-placement="left">Main</n-divider>
+    <p><strong>Uuid:</strong> {{ merchDetails.merch_uuid }}</p>
+    <p><strong>Name:</strong> {{ merchDetails.name }}</p>
+
+    <n-divider title-placement="left">Surugaya</n-divider>
+    <p><strong>Link:</strong> {{ merchDetails.origin_surugaya.link }}</p>
+    <p><strong>Cookie values:</strong> {{ merchDetails.origin_surugaya.cookie_values }}</p>
+
+    <n-divider title-placement="left">Mandarake</n-divider>
+    <p><strong>Link</strong> {{ merchDetails.origin_mandarake.link }}</p>
+  </n-card>
+  <div v-else>Not found</div>
 </template>
 
 <style scoped>
-
+/* Добавь стили по желанию */
 </style>
+