update

src/api/merchImages.js

@@ -1,6 +1,10 @@
 import { apiClient } from '@/services/apiClient.js'
+import { useAuthStore } from '@/stores/authStore.js'
+import { IMAGE_STORAGE_URL } from '@/main.js'
 
 export const useMerchImagesApi = () => {
+  const authStore = useAuthStore()
+
   const uploadImage = async (uuid, file) => {
     const formData = new FormData()
     formData.append('file', file)
@@ -13,28 +17,30 @@ export const useMerchImagesApi = () => {
         throw new Error(`Upload failed: ${response.status}`)
       }
 
-      return response.data
+      const { fullImage, thumbnail } = response.data
+
+      return {
+        fullImage,
+        thumbnail,
+      }
     } catch (error) {
       console.error('Upload failed:', error)
       throw error
     }
   }
 
-  const getImageUrl = async (uuid, type) => {
-    try {
-      const response = await apiClient.get(`/merch/images/${uuid}`, { type })
-      console.log(response.data.link)
+  const getImageUrl = (merchUuid, type = 'full') => {
+    const userUuid = authStore.userUuid;
+    if (!userUuid) throw new Error('userUuid not found in store');
 
-      if (response.status !== 200) {
-        throw new Error(`Get image failed: ${response.status}`)
-      }
-
-      return response.data.link
-    } catch (error) {
-      console.error('Get image failed:', error)
-      throw error
+    const allowedTypes = ['full', 'thumbnail'];
+    if (!allowedTypes.includes(type)) {
+      throw new Error(`Invalid type: ${type}. Allowed values: ${allowedTypes.join(', ')}`);
     }
-  }
+
+    return `${IMAGE_STORAGE_URL}/merchImages/${userUuid}/${merchUuid}?type=${type}`;
+  };
+
 
   const deleteImage = async (uuid) => {
     try {

src/main.js

@@ -11,6 +11,8 @@ export const BASE_URL = 'https://api.nqws.ru/api/v2'
 // export const BASE_URL = 'http://localhost:9090/api/v2'
 
 export const BASE_MANDARAKE_LINK = 'https://order.mandarake.co.jp/order/listPage/list?soldOut=1&keyword='
+// export const IMAGE_STORAGE_URL = 'http://localhost:9280'
+export const IMAGE_STORAGE_URL = 'https://images.nqws.ru'
 
 app.use(createPinia())
 app.use(router)

src/stores/authStore.js

@@ -3,11 +3,28 @@ import { computed, ref } from 'vue'
 import { apiClient } from '@/services/apiClient'
 import router from '@/router/index.js'
 
+function parseJwt(token) {
+  try {
+    const base64Url = token.split('.')[1]
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
+    const jsonPayload = decodeURIComponent(
+      atob(base64)
+        .split('')
+        .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+        .join('')
+    )
+    return JSON.parse(jsonPayload)
+  } catch (e) {
+    console.error('Invalid JWT:', e)
+    return null
+  }
+}
+
 export const useAuthStore = defineStore('auth', () => {
   // state
   const accessToken = ref(localStorage.getItem('accessToken'))
+  const userUuid = ref(localStorage.getItem('userUuid') || null)
   const user = ref(null)
-
   const activeTab = ref('signin')
 
   // getters
@@ -16,10 +33,20 @@ export const useAuthStore = defineStore('auth', () => {
   // actions
   const setToken = (token) => {
     accessToken.value = token
+
     if (token) {
       localStorage.setItem('accessToken', token)
+
+      const decoded = parseJwt(token)
+      const uuid = decoded?.sub
+      if (uuid) {
+        userUuid.value = uuid
+        localStorage.setItem('userUuid', uuid)
+      }
     } else {
       localStorage.removeItem('accessToken')
+      localStorage.removeItem('userUuid')
+      userUuid.value = null
     }
   }
 
@@ -68,7 +95,7 @@ export const useAuthStore = defineStore('auth', () => {
       const response = await apiClient.get('/user/')
       return response.data
     } catch (error) {
-      console.error('Register error:', error)
+      console.error('User info error:', error)
     }
   }
 
@@ -77,12 +104,13 @@ export const useAuthStore = defineStore('auth', () => {
       const response = await apiClient.get('/user/auth/current-session')
       return response.data
     } catch (error) {
-      console.error('Register error:', error)
+      console.error('Current session error:', error)
     }
   }
 
   return {
     accessToken,
+    userUuid,
     user,
     isAuthenticated,
     activeTab,

src/views/CollectionView/CollectionMerchCard.vue

@@ -15,22 +15,29 @@ const fileList = ref([])
 
 onMounted(async () => {
   try {
-    const imgUrl = await getImageUrl(props.merch.merch_uuid, 'thumbnail')
+    const imgUrl = getImageUrl(props.merch.merch_uuid, 'thumbnail')
+
+    await new Promise((resolve, reject) => {
+      const img = new Image()
+      img.src = imgUrl
+      img.onload = () => resolve(imgUrl)
+      img.onerror = () => reject(new Error('Image not found'))
+    })
+
     fileList.value = [
       {
-        name: 'full.jpg',
+        name: 'thumbnail.jpg',
         url: imgUrl,
         status: 'finished',
       },
     ]
   } catch (error) {
     fileList.value = []
-    if (!error.message?.includes('404')) {
-      console.error('Error getting image: ', error)
+    if (!error.message.includes('404')) {
+      console.error('Error getting thumbnail: ', error)
     }
   }
 })
-
 </script>
 
 <template>

src/views/DetailsView/DetailsViewImages.vue

@@ -77,21 +77,29 @@ async function handleUpload({ fileList: newFileList }) {
 
 onMounted(async () => {
   try {
-    const imgUrl = await getImageUrl(props.merchUuid, 'full')
+    const imgUrl = getImageUrl(props.merchUuid, 'full');
+
+    await new Promise((resolve, reject) => {
+      const img = new Image();
+      img.src = imgUrl;
+      img.onload = () => resolve(imgUrl);
+      img.onerror = () => reject(new Error('Image not found'));
+    });
+
     fileList.value = [
       {
         name: 'full.jpg',
         url: imgUrl,
         status: 'finished',
       },
-    ]
+    ];
   } catch (error) {
-    fileList.value = []
-    if (!error.message?.includes('404')) {
-      console.error('Error getting image: ', error)
+    fileList.value = [];
+    if (!error.message.includes('404')) {
+      console.error('Error getting image: ', error);
     }
   }
-})
+});
 
 const showConfirmDelete = ref(false)
 
@@ -207,7 +215,8 @@ const cancelDelete = () => {
 
 .preview-container {
   display: block;
-  width: 100%;
+  width: 50%;
+  min-width: 250px;
   max-width: 400px;
   margin: 0 auto;
 }