back/object/serializers.py

@@ -33,8 +33,6 @@ class Scene3DSerializer(serializers.ModelSerializer):
 
 
 class ClickableAreaSerializer(serializers.ModelSerializer):
-    image = serializers.ImageField(use_url=False)
-
     class Meta:
         model = ClickableArea
         fields = "__all__"

front/src/components/Gallery/index.vue

@@ -6,17 +6,17 @@ import KLogo from "../../assets/promo/logo.svg";
 import { useItem } from "../../stores/item";
 
 const router = useRouter()
-const page = useItem()
+const pageStore = useItem()
 
 const startColor = `hsl(${(Math.random() * 360).toFixed()}, 100%, 50%)`
 const endColor = `hsl(${(Math.random() * 360).toFixed()}, 100%, 50%)`
 </script>
 <template>
     <div class="main">
-        <div class="pin" @click="router.push(`/${page.slug}/${page.scene_3d}`)">
+        <div class="pin" @click="router.push(`/${pageStore.page.slug}/${pageStore.page.scene_3d}`)">
             <KLogo />
         </div>
-        <GalleryItem :files="page.images" v-if="page.images && page.images.length" />
+        <GalleryItem :files="pageStore.page.images" v-if="pageStore.page.images && pageStore.page.images.length" />
     </div>
 </template>
 <style scoped lang="scss">

front/src/components/Promo/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from 'vue';
+import { reactive, ref, watch } from 'vue';
 import type { Ref } from 'vue'
 import { useRoute } from 'vue-router';
 
@@ -13,7 +13,6 @@ import Sidebar from '../sidebar.vue'
 import { PROMOBG } from '../../constants';
 import { usePromoSidebar } from '../../stores/promo_sidebar';
 import { useLoading } from '../../stores/loading';
-import { useItem } from '../../stores/item';
 import { useRawData } from '../../stores/raw_data';
 
 const minPan = ref(new Vector3(-2, -2, -2))
@@ -63,13 +62,6 @@ const sidebarFunc = () => {
         sidebar.open()
     }
 }
-
-onMounted(() => {
-    const page = useItem();
-    if (!page.slug) {
-        page.load(route.params)
-    }
-})
 </script>
 <template>
     <div>

front/src/components/load.vue

@@ -6,6 +6,7 @@ const page = useItem()
 const route = useRoute()
 
 await page.load(route.params)
+console.log(page)
 </script>
 <template>
     {{ route.params }}

front/src/components/nav.vue

@@ -6,7 +6,7 @@ import { useItem } from '../stores/item';
 const route = useRoute()
 const router = useRouter()
 
-const page = useItem()
+const pageStore = useItem()
 
 console.log(router)
 </script>
@@ -14,17 +14,17 @@ console.log(router)
     <div class="nav">
         <div class="nav-group">
             <span class="nav-icon" :class="[{ 'active': route.name == 'home' || route.fullPath == '/' }]">
-                <RouterLink :to="`/${page.slug}`">
+                <RouterLink :to="`/${pageStore.page.slug}`">
                     <i-mdi-home-outline />
                 </RouterLink>
             </span>
             <span class="nav-icon" :class="[{ 'active': route.name == 'scene' }]" style="font-size: 1.875rem;">
-                <RouterLink :to="`/${page.slug}/${page.scene_3d}`">
+                <RouterLink :to="`/${pageStore.page.slug}/${pageStore.page.scene_3d}`">
                     <i-mdi:video-3d />
                 </RouterLink>
             </span>
             <span class="nav-icon" style="font-size: 1.375rem;">
-                <RouterLink :to="`/${page.slug}/gallery`">
+                <RouterLink :to="`/${pageStore.page.slug}/gallery`">
                     <i-mdi:vector-arrange-below />
                 </RouterLink>
             </span>

front/src/stores/item.ts

@@ -3,18 +3,15 @@ import { SERVER_URL } from '../constants'
 export const useItem = defineStore('item', {
     state: () => {
         return {
-
+            page: {} as PageItem
-        } as PageItem
+        }
     },
     actions: {
         async load(params: any) {
             const res = await fetch(`${SERVER_URL}/api/item/${params.item ? (params.item + '/') : '?is_front=true'}`)
             const pageArray = await res.json()
             const page = Array.isArray(pageArray) ? pageArray[0] : pageArray
-            // this.$state = Object.assign(this.$state, page)
+            this.page = page
-            for (const key in page) {
-                this[key] = page[key]
-            }
             return page
         }
     }