feat: 保存

.env.development

@@ -1 +1,2 @@
-VITE_DOMAIN_URL="http://192.168.20.61:8059/api/"
+VITE_DOMAIN_URL="http://192.168.20.61:8059"
+VITE_API_URL="http://192.168.20.61:8059/api/"

.env.production

@@ -1 +1,2 @@
-VITE_DOMAIN_URL="http://192.168.20.61:8059/api/"
+VITE_DOMAIN_URL="http://192.168.20.61:8059"
+VITE_API_URL="http://192.168.20.61:8059/api/"

src/components/heroSubTitle.vue

@@ -23,11 +23,14 @@ const titleSrc = computed(() => `/img/subtitle_${props.type || 1}.png`);
 <style lang="scss" scoped>
 .pure-nav {
   height: var(--main-sub-nav-height);
-  width: 100%;
+  width: calc(100% - var(--main-sub-menu-width));
   background-image: var(--main-sub-nav-background);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: left center;
+  padding-right: var(--main-sub-menu-width);
+  display: block;
+  flex: 0 0 var(--main-sub-nav-height);
   .meta-title {
     font-size: 1.375rem;
     text-align: center;

src/components/showCase.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="show-case-container">
     <div class="show-case" v-if="isModel">
-      <iframe
-        ref="iframeRef"
-        frameborder="0"
-        src="https://www.4dmodel.com/SuperTwo/index.html?m=TEST"
-      ></iframe>
+      <iframe ref="iframeRef" frameborder="0" :src="iframeURL"></iframe>
     </div>
     <div class="show-case" v-if="isVideo">
       <video
@@ -98,6 +94,7 @@ import { useSound } from "@vueuse/sound";
 const iframeRef = ref();
 const type = ref("model");
 const defaultType = ref(["model", "video", "audio", "gallery"]);
+const iframeURL = ref("https://www.4dmodel.com/SuperTwo/index.html?m=TEST");
 
 const isModel = computed(() => type.value === "model");
 const isVideo = computed(() => type.value === "video");

src/router/index.js

@@ -84,6 +84,15 @@ const routes = [
     },
   },
   {
+    path: "/model-viewer/:id",
+    name: "modelViewer",
+    component: () => import("@/views/viewer.vue"),
+    props: true,
+    meta: {
+      title: "",
+    },
+  },
+  {
     path: "/404",
     name: "404",
     component: () => import("@/views/404.vue"),

src/store/info.js

@@ -3,9 +3,8 @@ import { defineStore } from "pinia";
 import axios from "axios";
 import { useAxios } from "@vueuse/integrations/useAxios";
 
-const baseURL = import.meta.env.VITE_DOMAIN_URL;
 const instance = axios.create({
-  baseURL: baseURL,
+  baseURL: import.meta.env.VITE_API_URL,
 });
 
 export const useInfoStore = defineStore({
@@ -22,13 +21,12 @@ export const useInfoStore = defineStore({
   getters: {},
   actions: {
     async getPoster() {
-      const { data } = useAxios(
+      const { data, isFinished } = useAxios(
         "/show/poster/getList",
         { method: "get" },
         instance
       );
-      console.log("data", data);
-
+      console.log("data", data.value);
       this.poster = data;
     },
     getData() {

src/views/exhibition-detail.vue

@@ -10,7 +10,7 @@
               <img src="/img/ex_back.png" @click="$router.go(-1)" />
             </div>
             <div class="vr-btn-container">
-              <img src="/img/vr_button.png" />
+              <img src="/img/vr_button.png" @click="handleVRButton" />
             </div>
           </div>
 
@@ -37,10 +37,16 @@
 </template>
 
 <script setup>
-import { onMounted } from "vue";
 import heroSubTitle from "../components/heroSubTitle";
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+const handleVRButton = (id) => {
+  // const url = `https://sit-qiushoubwg.4dage.com/scene/index.html#/?m=1196`;
+  router.push(`/model-viewer/1196`);
+};
 </script>
 
 <style>
@@ -104,7 +110,7 @@ import sideMenu from "../components/sideMenu";
     margin: 1.2rem 0;
     text-align: center;
   }
-  .label-container{
+  .label-container {
     display: flex;
     justify-content: center;
   }

src/views/home.vue

@@ -2,7 +2,7 @@
   <div class="main">
     <div class="left">
       <!-- post -->
-      {{ posters }}
+
       <n-carousel
         dot-placement="bottom"
         style="width: 100%; height: 100%"
@@ -14,21 +14,13 @@
           style="width: 100%; height: 100%; object-fit: cover"
           src="/img/show_banner.png"
         />
-        <img
-          class="carousel-img"
-          style="width: 100%; height: 100%; object-fit: cover"
-          src="/img/show_banner.png"
-        />
-        <img
-          class="carousel-img"
-          style="width: 100%; height: 100%; object-fit: cover"
-          src="/img/show_banner.png"
-        />
-        <img
-          class="carousel-img"
-          style="width: 100%; height: 100%; object-fit: cover"
-          src="/img/show_banner.png"
-        />
+        <template v-for="item in posters">
+          <img
+            class="carousel-img"
+            style="width: 100%; height: 100%; object-fit: cover"
+            :src="domain + item.filePath"
+          />
+        </template>
       </n-carousel>
     </div>
     <div class="right">
@@ -57,17 +49,19 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
-import { useFullscreen } from "@vueuse/core";
+import { computed, onBeforeMount, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useInfoStore } from "../store/info";
 
 const { push } = useRouter();
 const InfoStore = useInfoStore();
 
-const posters = computed(() => InfoStore.poster);
-onMounted(() => {
-  InfoStore.getPoster();
+const posters = computed(() => InfoStore.poster.data || []);
+const domain = ref(import.meta.env.VITE_DOMAIN_URL);
+
+
+onMounted(async () => {
+  await InfoStore.getPoster();
 });
 </script>
 <style>
@@ -75,7 +69,7 @@ onMounted(() => {
   --main-home-left-background: #e2caa3;
   --main-home-right-background: #910000;
   --main-right-border: 10px;
-  --main-right-bg-img: url("img/h_banner_bg.png");
+  --main-right-bg-img: url("/img/h_banner_bg.png");
   --main-right-bg-btn1: url("/img/guide_1.png");
   --main-right-bg-btn2: url("/img/guide_2.png");
   --main-right-bg-btn3: url("/img/guide_3.png");

src/views/viewer.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="viewer">
+    <img
+      v-if="isShowback"
+      class="btn-back"
+      src="/img/sub_back_btn.png"
+      @click="handleBack"
+    />
+    <iframe frameborder="0" :src="url"></iframe>
+  </div>
+</template>
+<script setup>
+import { computed, watchEffect, ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+const isShowback = ref(true);
+const router = useRouter();
+
+defineOptions({
+  name: "model-viewer",
+});
+const props = defineProps({
+  id: {
+    type: [Number, String],
+    required: true,
+  },
+});
+
+const url = computed(
+  () =>
+    `https://sit-qiushoubwg.4dage.com/scene/index.html#/?m=${
+      props.id || "1196"
+    }`
+);
+const handleBack = () => {
+  console.log("handleBack");
+  router.go(-1);
+};
+onMounted(() => {
+  window.sceneBackIconStatus = (flag) => {
+    isShowback.value = Boolean(flag) ? true : false;
+  };
+});
+</script>
+
+<style scoped>
+.viewer,
+iframe {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+}
+.btn-back {
+  width: 3.75rem;
+  height: auto;
+  top: 3.25rem;
+  left: 2.6875rem;
+  position: absolute;
+  z-index: 10;
+  cursor: pointer;
+}
+</style>