src/api/merchImages.js

@@ -1,10 +1,6 @@
 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)
@@ -17,30 +13,28 @@ export const useMerchImagesApi = () => {
         throw new Error(`Upload failed: ${response.status}`)
       }
 
-      const { fullImage, thumbnail } = response.data
-
-      return {
-        fullImage,
-        thumbnail,
-      }
+      return response.data
     } catch (error) {
       console.error('Upload failed:', error)
       throw error
     }
   }
 
-  const getImageUrl = (merchUuid, type = 'full') => {
-    const userUuid = authStore.userUuid;
-    if (!userUuid) throw new Error('userUuid not found in store');
+  const getImageUrl = async (uuid, type) => {
+    try {
+      const response = await apiClient.get(`/merch/images/${uuid}`, { type })
+      console.log(response.data.link)
 
-    const allowedTypes = ['full', 'thumbnail'];
-    if (!allowedTypes.includes(type)) {
-      throw new Error(`Invalid type: ${type}. Allowed values: ${allowedTypes.join(', ')}`);
+      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
     }
-
-    return `${IMAGE_STORAGE_URL}/merchImages/${userUuid}/${merchUuid}?type=${type}`;
-  };
-
+  }
 
   const deleteImage = async (uuid) => {
     try {

src/main.js

@@ -11,8 +11,6 @@ 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,28 +3,11 @@ 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
@@ -33,20 +16,10 @@ 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
     }
   }
 
@@ -95,7 +68,7 @@ export const useAuthStore = defineStore('auth', () => {
       const response = await apiClient.get('/user/')
       return response.data
     } catch (error) {
-      console.error('User info error:', error)
+      console.error('Register error:', error)
     }
   }
 
@@ -104,13 +77,12 @@ export const useAuthStore = defineStore('auth', () => {
       const response = await apiClient.get('/user/auth/current-session')
       return response.data
     } catch (error) {
-      console.error('Current session error:', error)
+      console.error('Register error:', error)
     }
   }
 
   return {
     accessToken,
-    userUuid,
     user,
     isAuthenticated,
     activeTab,

src/views/CollectionView/CollectionMerchCard.vue

@@ -15,29 +15,22 @@ const fileList = ref([])
 
 onMounted(async () => {
   try {
-    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'))
-    })
-
+    const imgUrl = await getImageUrl(props.merch.merch_uuid, 'thumbnail')
     fileList.value = [
       {
-        name: 'thumbnail.jpg',
+        name: 'full.jpg',
         url: imgUrl,
         status: 'finished',
       },
     ]
   } catch (error) {
     fileList.value = []
-    if (!error.message.includes('404')) {
-      console.error('Error getting thumbnail: ', error)
+    if (!error.message?.includes('404')) {
+      console.error('Error getting image: ', error)
     }
   }
 })
+
 </script>
 
 <template>

src/views/DetailsView/DetailsViewImages.vue

@@ -77,29 +77,21 @@ async function handleUpload({ fileList: newFileList }) {
 
 onMounted(async () => {
   try {
-    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'));
-    });
-
+    const imgUrl = await getImageUrl(props.merchUuid, 'full')
     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)
 
@@ -215,8 +207,7 @@ const cancelDelete = () => {
 
 .preview-container {
   display: block;
-  width: 50%;
-  min-width: 250px;
+  width: 100%;
   max-width: 400px;
   margin: 0 auto;
 }