update

src/components/ArGuided.vue

@@ -1,6 +1,12 @@
 <script>
+import { useRoute } from "vue-router";
 import "aframe";
-// import 'ar.js';
+
+const route = useRoute();
+
+// 取得 URL 參數
+const videoUrl = route.query.url;
+console.log("videoUrl", videoUrl);
 </script>
 
 <template>
@@ -9,14 +15,29 @@ import "aframe";
       <a-assets>
         <video
           id="vr-video"
-          src="../assets/video/路線24-26-27-v3.mp4"
+          ref="arVideo"
+          :src="videoUrl"
           autoplay
+          crossorigin="anonymous"
           ecrossorigin="anonymous"
         ></video>
       </a-assets>
 
       <a-sky src="#vr-video"></a-sky>
     </a-scene>
+
+    <!-- <a-scene>
+      <a-assets>
+        <video
+          id="vr-video"
+          src="../assets/video/路線24-26-27-v3.mp4"
+          autoplay
+          ecrossorigin="anonymous"
+        ></video>
+      </a-assets>
+
+      <a-sky src="#vr-video"></a-sky>
+    </a-scene> -->
   </div>
 </template>
 

src/components/Chat.vue

@@ -510,8 +510,9 @@ const updateMenuHeight = () => {
 };
 
 // 語言下拉選單 (Kiosk)
-function onLanguageChange(lang) {
+function onLanguageChange(lang, val) {
   isVideoPause.value = true;
+  currentLang.value = val;
 
   if (lang === "中文") {
     chooseLang("zh-tw");
@@ -531,12 +532,17 @@ function onLanguageChange(lang) {
   }
 }
 
+let currentLang = ref("");
+
 function chooseLang(lang) {
   console.log("選擇語言：", lang);
   selectLang.value = lang;
   isLanguagePage.value = false;
   locale.value = lang; // i18n locale
   localStorage.setItem("lang", lang);
+  currentLang.value = lang;
+
+  console.log("currentLang", currentLang.value);
 
   messages.value.push({
     label: "text",
@@ -551,12 +557,16 @@ function chooseLang(lang) {
   });
 
   // 判斷語言修改 title
-  const language = localStorage.getItem("lang") || "zh-tw";
-  console.log("language", language);
-  if (language === "zh-tw") {
+  let language = getLang();
+
+  if (language === "ch") {
     document.title = "New 台北101 AI智能客服";
-  } else if (language === "en-us") {
+  } else if (language === "en") {
     document.title = "New Taipei 101 AI Intelligent Customer Service";
+  } else if (language === "jp") {
+    document.title = "台北 101 インテリジェントカスタマーサービスシステム";
+  } else if (language === "ko") {
+    document.title = "타이베이 101 지능형 고객";
   }
 
   setAd();
@@ -567,13 +577,13 @@ function chooseLang(lang) {
   // let lang = getLang();
   let sources;
   console.log("videoSources.value", videoSources.value);
-  if (language === "zh-tw") {
+  if (language === "ch") {
     sources = videoSources.value;
-  } else if (language === "en-us") {
+  } else if (language === "en") {
     sources = videoSourcesEn.value;
-  } else if (language === "ja-jp") {
+  } else if (language === "jp") {
     sources = videoSourcesJp.value;
-  } else if (language === "ko-kr") {
+  } else if (language === "ko") {
     sources = videoSourcesKo.value;
   } else {
     sources = videoSources.value;
@@ -1590,24 +1600,12 @@ const loadVideoSources = async () => {
   // const speak_2 = await import("@/assets/video/speak_2.mp4");
   // videoSpeakSources.value = [speak_1.default, speak_2.default];
 
-  videoSources.value = [
-    // "https://cmm.ai/101-ai-chatbot-new/video/start_1.mp4",
-    "https://cmm.ai/101-video/start_2.mp4",
-  ];
-  videoSourcesEn.value = [
-    // "https://cmm.ai/101-ai-chatbot-new/video/start_en_1.mp4",
-    "https://cmm.ai/101-video/start_en_2.mp4",
-  ];
-  videoSourcesJp.value = ["https://cmm.ai/101-video/start_jp_2.mp4"];
-  videoSourcesKo.value = ["https://cmm.ai/101-video/start_ko_2.mp4"];
-  videoMuteSources.value = [
-    // "https://cmm.ai/101-ai-chatbot-new/video/mute_1.mp4",
-    "https://cmm.ai/101-video/mute_2.mp4",
-  ];
-  videoSpeakSources.value = [
-    // "https://cmm.ai/101-ai-chatbot-new/video/speak_1.mp4",
-    "https://cmm.ai/101-video/speak_2.mp4",
-  ];
+  videoSources.value = ["https://cmm.ai/101-video/start_ch.mp4"];
+  videoSourcesEn.value = ["https://cmm.ai/101-video/start_en.mp4"];
+  videoSourcesJp.value = ["https://cmm.ai/101-video/start_jp.mp4"];
+  videoSourcesKo.value = ["https://cmm.ai/101-video/start_ko.mp4"];
+  videoMuteSources.value = ["https://cmm.ai/101-video/mute.mp4"];
+  videoSpeakSources.value = ["https://cmm.ai/101-video/speak_2.mp4"];
 };
 
 let videoSrc = ref("");
@@ -1740,6 +1738,7 @@ async function selectCategory(value, index) {
     //   body: mapList,
     // });
 
+    // 位置導引
     // messages.value.push({
     //   label: "location",
     //   author: "ai",
@@ -2628,8 +2627,10 @@ function handleVideoCache() {
     body: videoCacheData.value.answer,
   });
 
-  // 播放 Cache 影片
-  videoSrc.value = `https://cmm.ai:9101${videoCacheData.value.video_url}`;
+  // AR 導覽影片
+  if (videoCacheData.value.video_url)
+    // 播放 Cache 影片
+    videoSrc.value = `https://cmm.ai:9101${videoCacheData.value.video_url}`;
   video.value.loop = false;
   video.value.load();
 
@@ -2836,7 +2837,8 @@ onBeforeUnmount(() => {
       <div class="lang-select">
         <button
           v-for="(item, index) in langList"
-          @click="onLanguageChange(item.lang)"
+          @click="onLanguageChange(item.lang, item.value)"
+          :class="{ active: currentLang === item.value }"
         >
           {{ item.lang }}
         </button>
@@ -4242,10 +4244,12 @@ onBeforeUnmount(() => {
       width: 100%;
       height: 120%;
       position: fixed;
-      top: 55px;
+      // top: 55px;
+      top: 0;
       left: 0;
       right: 0;
       z-index: 10;
+      transform: scale(1.3);
 
       @media (max-width: 575px) {
         top: 15px;
@@ -4690,9 +4694,9 @@ onBeforeUnmount(() => {
           }
         }
 
-        .swiper-button-prev {
-          display: none;
-        }
+        // .swiper-button-prev {
+        //   display: none;
+        // }
       }
 
       .title,
@@ -5098,13 +5102,18 @@ onBeforeUnmount(() => {
   }
 
   button {
-    padding: 0.3rem 1.3rem;
+    padding: 0.2rem 1.3rem;
     font-size: 0.875rem;
     color: #fff;
     background-color: var(--main-color);
+    border: 4px solid transparent;
     border-radius: 100px;
     margin-bottom: 0.8rem;
     letter-spacing: 1px;
+
+    &.active {
+      border: 4px solid #ae774f;
+    }
   }
 }
 

src/router/index.js

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import BrandSearch from '../views/BrandSearch.vue'
-// import ArTourView from '../views/ArTourView.vue'
+import ArTourView from '../views/ArTourView.vue'
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -16,11 +16,11 @@ const router = createRouter({
       name: 'BrandSearch',
       component: BrandSearch,
     },
-    // {
-    //   path: '/ar-tour',
-    //   name: 'ar-tour',
-    //   component: ArTourView
-    // },
+    {
+      path: '/ar-tour',
+      name: 'ar-tour',
+      component: ArTourView
+    },
   ]
 })